/* ============================================================
   AEROTWIN — TOKENS & DUAL THEME ENGINE
   ============================================================ */


    /* ============================================================
   AEROTWIN — DUAL THEME ENGINE
   Integrated design tokens from /Light Theme and /Dark Theme:
   - Light Theme (Monad): Warm parchment canvas (#f6f3f1), Lake Blue
     accent (#2b59d1), Periwinkle Mist (#cfdaf5), Graphite/Smoke text,
     hairline Ash borders, editorial serif headlines.
   - Dark Theme (Warp): Obsidian canvas (#050505), Graphite panels (#131313),
     Onyx elevated cards (#1c1c1b), Phosphor Violet accent (#4fbdbd),
     Bone text (#faf9f6), compact engineered terminal typography.

   HONESTY CONTRACT (read before editing):
   - Browser-only SIMULATION prototype. No physical engine, no
     live CAN/ECU/FADEC link. All telemetry is generated client-side.
   - Primary diagnosis: Het's trained XGBoost classifier (CONNECTED,
     31 features, 8 classes, synthetic data, simulation-only
     evaluation — see Diagnostics -> Model Validation). The
     rule/signature baseline still runs independently as a cross-check,
     never as the sole diagnostic source unless the model fails to load.
   - RUL is synthetic/simulation-derived extrapolation only — Het's
     package does not include an RUL model; do not attribute RUL to XGBoost.
   - Mission risk is a documented prototype heuristic, not a
     certified safety prediction.
   - Security screen is an integration shell — PENDING, not implemented.
   - Every analytic output must carry a validation badge so the UI
     never overstates what it is.
   ============================================================ */

    :root {
      /* Functional theme mapping — Light Theme (Precision Aerospace Editorial) */
      --paper: #F6F3F1;
      --panel: #FFFFFF;
      --panel-raise: #EAE6E3;
      --teal: #1D4ED8;
      --teal-strong: #1E3A8A;
      --teal-soft: #DBEAFE;
      /* COLOR-AS-TEXT RULE:
         Accent teal (--teal, --teal-strong) must NEVER be the fill color of
         a text run longer than ~2-3 characters (i.e. never a label, value,
         sentence, or heading). Body/label/heading text is always a neutral
         ink/bone token, in both themes, regardless of "live/active" meaning.
         Accent color is expressed only via: borders, small dot/icon
         indicators (≤8px), active-state underlines, or badge tint
         backgrounds (never badge TEXT color = accent on its own, must be
         neutral text over accent-tinted background per existing badge
         variants).
         Exception: a single-word inline link may use a desaturated slate-teal
         --color-text-link-muted (see below), never the full --teal accent. */
      --color-text-link-muted: #0E5E58; /* light theme — verify AA contrast on --paper/--panel */
      --navy: #0F172A;
      --navy-soft: #E2E8F0;
      --maroon: #B91C1C;
      --maroon-soft: #FEE2E2;
      --ink: #0F172A;
      --ink-soft: #334155;
      --ink-faint: #475569;
      --line: #CBD5E1;
      --line-strong: #94A3B8;

      --status-normal: #166534;
      --status-normal-bg: #DCFCE7;
      --status-warn: #B45309;
      --status-warn-bg: #FEF3C7;
      --status-crit: #B91C1C;
      --status-crit-bg: #FEE2E2;
      --status-idle: #475569;
      --status-idle-bg: #F1F5F9;

      /* Precision Aerospace Radius Hierarchy */
      --radius-xs: 4px;
      --radius-tag: 6px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-pill: 999px;

      --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --sans-cond: 'IBM Plex Sans Condensed', var(--sans);
      --display: 'Space Grotesk', var(--sans-cond);
      --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
      --text-scale: 1;

      /* ── 1.25 Modular Type Scale (Major Third) ── */
      --text-xs:   0.75rem;   /* 12px hard floor */
      --text-sm:   0.8rem;    /* ~13px — secondary / caption text */
      --text-base: 1rem;      /* 16px  — body floor */
      --text-md:   1.25rem;   /* ~20px — H4 / subheadings */
      --text-lg:   1.563rem;  /* ~25px — H3 */
      --text-xl:   1.953rem;  /* ~31px — H2 */
      --text-2xl:  2.441rem;  /* ~39px — H1 screen titles */

      /* ── Spacing Scale (Base-4 Ramp) ── */
      --spacing-4: 4px;
      --spacing-8: 8px;
      --spacing-12: 12px;
      --spacing-16: 16px;
      --spacing-20: 20px;
      --spacing-24: 24px;
      --spacing-28: 28px;
      --spacing-32: 32px;
      --spacing-40: 40px;
      --spacing-44: 44px;
      --spacing-48: 48px;
      --spacing-64: 64px;
      --spacing-80: 80px;
      --spacing-96: 96px;

      /* ── Typography Scale (Capped Ceiling, 12px Hard Floor) ── */
      /* Ceiling: 32px (--text-readout), reserved for gauge/numeric displays
         (Command Center health %, RUL hours, etc.) — never for prose headings.
         Floor: 12px (--text-micro) — never use below this size anywhere in
         the app, and never use --text-micro for anything the operator needs
         to read at a glance (alerts, decision cards, evidence). */
      --text-micro: 12px;        /* line-height 1.4; tracking +0.02em — badges, unit tags, footnotes ONLY */
      --text-caption: 13px;      /* line-height 1.45; tracking +0.01em — HUD sub-labels */
      --text-body-sm: 13px;      /* line-height 1.5; tracking 0 — dense table/panel text */
      --text-body: 14px;         /* line-height 1.5; tracking 0 — default body copy */
      --text-body-lg: 16px;      /* line-height 1.5; tracking 0 — emphasized body */
      --text-subheading: 18px;   /* line-height 1.4; tracking -0.005em — panel sub-headers */
      --text-heading-sm: 20px;   /* line-height 1.35; tracking -0.01em — section headers */
      --text-heading: 24px;      /* line-height 1.3; tracking -0.015em — screen/view titles */
      --text-heading-lg: 28px;   /* line-height 1.25; tracking -0.02em — rare top-level titles only */
      --text-readout: 32px;      /* line-height 1.15; tracking -0.02em — large numeric gauge values ONLY */

      --motion-instant: 90ms;
      --motion-fast: 120ms;
      --motion-base: 200ms;
      --motion-slow: 400ms;
      --motion-deliberate: 600ms;

      --ease-standard: cubic-bezier(.2, .0, .2, 1);
      --ease-decel: cubic-bezier(.0, .0, .2, 1);
      --ease-accel: cubic-bezier(.4, .0, 1, 1);
      --ease-spring-soft: cubic-bezier(.34, 1.2, .64, 1);

      --topbar-h: 58px;
      --hud-h: 38px;
      --drawer-w: 360px;
      --drawer-bg: rgba(246, 243, 241, 0.96);
      --drawer-card-bg: rgba(255, 255, 255, 0.95);
      --sidebar-texture: rgba(29, 78, 216, 0.04);
    }

    html[data-theme="dark"] {
      /* Functional theme mapping — Dark Theme (Precision Aerospace Editorial) */
      /* Dark Theme (Warp) Canvas Ramp:
         Removes flat-OLED crush, keeps the three-step canvas → card → elevated-surface ramp intact,
         stays neutral (no blue/warm tint). */
      --color-obsidian: #050505;
      --color-graphite: #131313;
      --color-onyx: #1C1C1B;

      /* TODO(design-debt): value is now a teal tint of DRDO Teal (#0F5757),
         tuned for AA contrast on dark canvas. Variable name still says
         "violet" for historical reasons — rename to --color-signal-teal in a
         dedicated pass, not a fix pass. Do not let this drift further. */
      --color-phosphor-violet: #4FBDBD;

      --paper: #090D16;
      --panel: #0F172A;
      --panel-raise: #1E293B;
      --teal: #4FBDBD;
      --teal-strong: #38A3A3;
      --teal-soft: rgba(79, 189, 189, 0.16);
      --color-text-link-muted: #8FB8B8; /* dark theme — verify AA contrast on --paper */
      --navy: #94A3B8;
      --navy-soft: rgba(148, 163, 184, 0.16);
      --maroon: #F87171;
      --maroon-soft: rgba(248, 113, 113, 0.18);
      --ink: #F8FAFC;
      --ink-soft: #CBD5E1;
      --ink-faint: #94A3B8;
      --line: #334155;
      --line-strong: #475569;

      --status-normal: #34D399;
      --status-normal-bg: rgba(52, 211, 153, 0.16);
      --status-warn: #FBBF24;
      --status-warn-bg: rgba(251, 191, 36, 0.16);
      --status-crit: #F87171;
      --status-crit-bg: rgba(248, 113, 113, 0.18);
      --status-idle: #94A3B8;
      --status-idle-bg: rgba(148, 163, 184, 0.16);

      --radius-xs: 4px;
      --radius-tag: 6px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-pill: 999px;

      --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --sans-cond: 'IBM Plex Sans Condensed', var(--sans);
      --display: 'Space Grotesk', var(--sans-cond);
      --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
      --drawer-bg: rgba(15, 23, 42, 0.97);
      --drawer-card-bg: rgba(30, 41, 59, 0.92);
      --sidebar-texture: rgba(56, 189, 248, 0.05);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: calc(16px * var(--text-scale));
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: var(--text-base);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--sans-cond);
      font-weight: 700;
      margin: 0 0 .5em 0;
      color: var(--ink);
      letter-spacing: -0.01em;
      line-height: 1.15;
    }

    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }
    h4 { font-size: var(--text-md); }

    p {
      margin: 0 0 1em 0;
      max-width: 580px;
    }

    a {
      color: inherit;
    }

    button,
    select,
    input {
      font-family: var(--sans);
    }

    ::selection {
      background: var(--teal);
      color: #fff;
    }

    :focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    .schematic-bg {
      background-image:
        repeating-linear-gradient(0deg, transparent, transparent 27px, var(--sidebar-texture) 27px, var(--sidebar-texture) 28px),
        repeating-linear-gradient(90deg, transparent, transparent 27px, var(--sidebar-texture) 27px, var(--sidebar-texture) 28px);
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      padding: 22px 26px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
    }

    /* ============================================================
     §3 CONTRAST AUDIT — WCAG AA FIXES
     Listed tokens, backgrounds, and what changed.
     ============================================================ */

    /* FIX 1: .badge-info & .badge-simulation — 5-variant standard */
    .badge-info,
    .badge-simulation,
    .tag-info,
    .tag-simulation {
      color: var(--ink);
      border: 1px solid var(--teal);
      background: var(--teal-soft);
      font-weight: 700;
      opacity: 1;
    }

    html[data-theme="dark"] .badge-info,
    html[data-theme="dark"] .badge-simulation,
    html[data-theme="dark"] .tag-info,
    html[data-theme="dark"] .tag-simulation {
      color: #FAF9F6;
      background: rgba(56, 189, 248, 0.15);
      border-color: var(--teal);
    }

    /* FIX 2: .decision-pill[data-d="idle"] */
    .decision-pill[data-d="idle"] {
      background: var(--panel-raise);
      color: var(--ink);
      border: 1px solid var(--line-strong);
      opacity: 1;
    }

    /* FIX 3: .tb-chip .tb-mode */
    .tb-chip .tb-mode {
      font-family: var(--mono);
      font-size: var(--text-micro);
      font-weight: 700;
      letter-spacing: normal;
      padding: 2px 7px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--teal);
      background: var(--teal-soft);
      color: var(--ink);
      line-height: 1.4;
    }

    html[data-theme="dark"] .tb-chip .tb-mode {
      color: #FFFFFF;
      background: rgba(56, 189, 248, 0.2);
    }

    /* FIX 4: .cc-verdict-q — editorial eyebrow, neutral soft text without wide tracking */
    .cc-verdict-q {
      font-family: var(--mono);
      font-size: var(--text-micro);
      letter-spacing: normal;
      text-transform: none;
      color: var(--ink-soft);
      margin-bottom: 5px;
      opacity: 1;
      line-height: 1.4;
    }

    /* FIX 5: .nav-item.active light theme
     Light: --teal=#2B59D1 on teal-soft=#CFDAF5 → ≈3.8:1 → fails 4.5:1 for 12.5px text.
     Fix: use teal-strong (#1A44B0) for AA compliance.
     Dark theme: --ink=bone on teal-soft → 12:1+ → no change needed. */
    .nav-item.active {
      color: var(--ink);
    }

    html[data-theme="dark"] .nav-item.active {
      color: var(--ink);
    }

    /* FIX 6: Dark Theme Primary Button & Maroon Button Text Contrast
     Dark: --teal=#CBB0F7 (light violet) with #000 text gives 12.5:1 contrast vs #fff at 1.7:1 */
    html[data-theme="dark"] .btn-primary {
      color: #080808;
      font-weight: 700;
    }

    html[data-theme="dark"] .btn-primary:hover {
      color: #000000;
    }

    html[data-theme="dark"] .btn-primary:disabled {
      color: var(--ink-faint);
    }

    html[data-theme="dark"] .btn-maroon {
      color: #ffffff;
    }

    /* FIX 7: Profile Stage text contrast - rich dark indicators with crisp white text */
    .profile-stage,
    html[data-theme="dark"] .profile-stage {
      color: #ffffff !important;
      font-weight: 700;
      text-shadow: none;
    }

    /* FIX 8: .badge-synthetic WCAG AA contrast fix -> matches .badge-neutral standard */
    .badge-synthetic {
      background: var(--panel-raise);
      border: 1px solid var(--line);
      color: var(--ink);
      opacity: 1;
    }
    html[data-theme="dark"] .badge-synthetic {
      background: rgba(255, 255, 255, 0.06);
      border-color: var(--line);
      color: #FAF9F6;
    }