/* ==========================================================================
   IRA AEROSPACE — DESIGN TOKENS
   --------------------------------------------------------------------------
   Two grounds, five section themes, one component set.

   THEME (light / dark / system)
     :root                                     → the LIGHT palette
     @media (prefers-color-scheme: dark)
       :root:not([data-theme="light"])         → dark for system users
     :root[data-theme="dark"]                  → dark when explicitly chosen
   An explicit choice always beats the OS in both directions. Nothing is
   defined only inside a media query, so the un-stamped "system" state is
   always complete.

   SECTION (survey / analytics / training / fleet / vault)
     [data-view="…"] re-points --accent, --accent-2 and the background motif.
     Components NEVER name a section colour — they use --accent. That is what
     keeps four worlds from drifting into four stylesheets.
   ========================================================================== */

:root {
  color-scheme: light;
  --is-light: 1;

  /* --- LIGHT ground & surfaces -----------------------------------------
     Not paper-white: a cool near-white with a faint cyan bias, so the
     neutrals read as chosen rather than inherited. */
  --void:        #F1F5F6;   /* page ground   */
  --strata-00:   #E7EDEF;   /* recessed      */
  --strata-01:   #FFFFFF;   /* primary card  */
  --strata-02:   #F6F9FA;   /* raised/hover  */
  --strata-03:   #E2EAED;   /* active        */
  --surface-rgb: 255, 255, 255;
  --ground-rgb:  241, 245, 246;

  /* --- LIGHT ink -------------------------------------------------------- */
  --platinum:    #0C1418;
  --platinum-2:  #33454D;
  --platinum-3:  #5C6F77;
  --platinum-4:  #8A9AA1;

  --platinum-rgb:   12, 20, 24;
  --platinum-2-rgb: 51, 69, 77;
  --platinum-3-rgb: 92, 111, 119;
  --platinum-4-rgb: 138, 154, 161;

  /* --- LIGHT section palette -------------------------------------------
     Darkened so every accent clears 4.5:1 as text on white. The hue is the
     same in both themes; only the value moves. */
  --teal:        #00786A;
  --violet:      #5B49D6;
  --amber:       #9A5D00;
  --ice:         #2A6A8B;
  --alert:       #C1123F;

  --teal-rgb:    0, 120, 106;
  --violet-rgb:  91, 73, 214;
  --amber-rgb:   154, 93, 0;
  --ice-rgb:     42, 106, 139;
  --alert-rgb:   193, 18, 63;

  /* Line-work opacities are higher on light, where hairlines disappear. */
  --rule-a: 0.16;
  --rule-b: 0.34;
  --rule-c: 0.58;
  --rule-neutral: rgba(12, 20, 24, 0.14);
  --wash-a: 0.07;
  --motif-a: 0.055;
  --shade-a: 0.10;          /* canvas fills that must sit on the ground */

  /* --- Active accent (re-pointed per section) --------------------------- */
  --accent:       var(--teal);
  --accent-rgb:   var(--teal-rgb);
  --accent-2:     var(--amber);
  --accent-2-rgb: var(--amber-rgb);

  --rule-faint:  rgba(var(--accent-rgb), var(--rule-a));
  --rule:        rgba(var(--accent-rgb), var(--rule-b));
  --rule-strong: rgba(var(--accent-rgb), var(--rule-c));
  --accent-wash: rgba(var(--accent-rgb), var(--wash-a));
  --accent-glow: rgba(var(--accent-rgb), 0.45);

  --motif-size: 96px 96px;
  --motif: linear-gradient(to right, rgba(var(--accent-rgb), var(--motif-a)) 1px, transparent 1px),
           linear-gradient(to bottom, rgba(var(--accent-rgb), var(--motif-a)) 1px, transparent 1px);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-display: clamp(2.6rem, 6.4vw, 5.6rem);
  --t-h1:      clamp(2.1rem, 4.4vw, 3.6rem);
  --t-h2:      clamp(1.5rem, 2.4vw, 2.1rem);
  --t-h3:      clamp(1.12rem, 1.5vw, 1.32rem);
  --t-body:    clamp(0.95rem, 1.05vw, 1.05rem);
  --t-small:   0.875rem;
  --t-label:   0.688rem;
  --t-micro:   0.625rem;

  /* --- Space ------------------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* full-bleed: the page uses the whole screen; the gutter scales with it */
  --gutter: clamp(1rem, 3.2vw, 4.5rem);
  --max: none;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-sharp: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;  --dur-2: 320ms;  --dur-3: 620ms;  --dur-4: 1100ms;
}

/* ==========================================================================
   DARK — for system users who prefer it, unless they chose light explicitly
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --is-light: 0;

    --void:        #05070A;
    --strata-00:   #080C10;
    --strata-01:   #0B1116;
    --strata-02:   #10181E;
    --strata-03:   #16212A;
    --surface-rgb: 11, 17, 22;
    --ground-rgb:  5, 7, 10;

    --platinum:    #DCE6EA;
    --platinum-2:  #A3B4BC;
    --platinum-3:  #6E828C;
    --platinum-4:  #56676F;

    --platinum-rgb:   220, 230, 234;
    --platinum-2-rgb: 163, 180, 188;
    --platinum-3-rgb: 110, 130, 140;
    --platinum-4-rgb: 70, 86, 95;

    --teal:        #00E5C4;
    --violet:      #9B8CFF;
    --amber:       #FF9E1B;
    --ice:         #8FC9E8;
    --alert:       #FF2D6F;

    --teal-rgb:    0, 229, 196;
    --violet-rgb:  155, 140, 255;
    --amber-rgb:   255, 158, 27;
    --ice-rgb:     143, 201, 232;
    --alert-rgb:   255, 45, 111;

    --rule-a: 0.09;
    --rule-b: 0.20;
    --rule-c: 0.42;
    --rule-neutral: rgba(214, 226, 230, 0.13);
    --wash-a: 0.08;
    --motif-a: 0.035;
    --shade-a: 0.05;
    --accent-glow: rgba(var(--accent-rgb), 0.55);
  }
}

/* ==========================================================================
   DARK — chosen explicitly. Same values; wins over a light OS.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;
  --is-light: 0;

  --void:        #05070A;
  --strata-00:   #080C10;
  --strata-01:   #0B1116;
  --strata-02:   #10181E;
  --strata-03:   #16212A;
  --surface-rgb: 11, 17, 22;
  --ground-rgb:  5, 7, 10;

  --platinum:    #DCE6EA;
  --platinum-2:  #A3B4BC;
  --platinum-3:  #6E828C;
  --platinum-4:  #56676F;

  --platinum-rgb:   220, 230, 234;
  --platinum-2-rgb: 163, 180, 188;
  --platinum-3-rgb: 110, 130, 140;
  --platinum-4-rgb: 70, 86, 95;

  --teal:        #00E5C4;
  --violet:      #9B8CFF;
  --amber:       #FF9E1B;
  --ice:         #8FC9E8;
  --alert:       #FF2D6F;

  --teal-rgb:    0, 229, 196;
  --violet-rgb:  155, 140, 255;
  --amber-rgb:   255, 158, 27;
  --ice-rgb:     143, 201, 232;
  --alert-rgb:   255, 45, 111;

  --rule-a: 0.09;
  --rule-b: 0.20;
  --rule-c: 0.42;
  --rule-neutral: rgba(214, 226, 230, 0.13);
  --wash-a: 0.08;
  --motif-a: 0.035;
  --shade-a: 0.05;
  --accent-glow: rgba(var(--accent-rgb), 0.55);
}

/* ==========================================================================
   PER-SECTION THEMES
   Accent and background motif only. Structure never changes, and because the
   accents resolve through --teal / --violet / … each one is already correct
   in both grounds.
   ========================================================================== */

/* 01 · SURVEY — the world as a cross-section through ground. */
[data-view="survey"] {
  --accent: var(--teal);       --accent-rgb: var(--teal-rgb);
  --accent-2: var(--amber);    --accent-2-rgb: var(--amber-rgb);
  --motif-size: 100% 22px;
  --motif: repeating-linear-gradient(
    to bottom,
    rgba(var(--accent-rgb), var(--motif-a)) 0 1px,
    transparent 1px 22px);
}

/* 02 · ANALYTICS — the world as discrete returns. */
[data-view="analytics"] {
  --accent: var(--violet);     --accent-rgb: var(--violet-rgb);
  --accent-2: var(--teal);     --accent-2-rgb: var(--teal-rgb);
  --motif-size: 26px 26px;
  --motif: radial-gradient(circle at 1px 1px,
    rgba(var(--accent-rgb), calc(var(--motif-a) * 4)) 1px, transparent 1.4px);
}

/* 03 · TRAINING — the world as an approach path. */
[data-view="training"] {
  --accent: var(--amber);      --accent-rgb: var(--amber-rgb);
  --accent-2: var(--teal);     --accent-2-rgb: var(--teal-rgb);
  --motif-size: 64px 100%;
  --motif: repeating-linear-gradient(
    to right,
    rgba(var(--accent-rgb), calc(var(--motif-a) * 1.6)) 0 2px,
    transparent 2px 64px);
}

/* 04 · FLEET — the world as an engineering drawing. */
[data-view="fleet"] {
  --accent: var(--ice);        --accent-rgb: var(--ice-rgb);
  --accent-2: var(--amber);    --accent-2-rgb: var(--amber-rgb);
  --motif-size: 24px 24px;
  --motif: linear-gradient(to right, rgba(var(--accent-rgb), calc(var(--motif-a) * 1.6)) 1px, transparent 1px),
           linear-gradient(to bottom, rgba(var(--accent-rgb), calc(var(--motif-a) * 1.6)) 1px, transparent 1px);
}

/* VAULT — redaction. */
[data-view="vault"] {
  --accent: var(--alert);        --accent-rgb: var(--alert-rgb);
  --accent-2: var(--platinum-3); --accent-2-rgb: var(--platinum-3-rgb);
  --motif-size: 100% 8px;
  --motif: repeating-linear-gradient(
    to bottom,
    rgba(var(--accent-rgb), calc(var(--motif-a) * 1.4)) 0 2px,
    transparent 2px 8px);
}

[data-view="contact"] {
  --accent: var(--teal);       --accent-rgb: var(--teal-rgb);
  --accent-2: var(--amber);    --accent-2-rgb: var(--amber-rgb);
}