/* ═══════════════════════════════════════════════════════════════
   cite0 · design tokens (CSS custom properties)
   ───────────────────────────────────────────────────────────────
   Generated from /design/tokens.yaml. Edit that file first, then
   propagate changes here. Imported by every surface:
     • landing-example.html  →  /design/tokens.css
     • insights.html         →  /design/tokens.css
     • engine UI             →  /static/design/tokens.css
                               (copy synced via `make sync-design`
                                — see DESIGN.md)

   Changing a brand color is a one-edit operation: tweak the
   palette block at the top and every component on every surface
   re-skins automatically.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Primitive palette (the six brand swatches) ────────────── */
  --c-ink-950:        #101828;
  --c-eggplant-900:   #241b3b;
  --c-violet-600:     #7c3aed;
  --c-orange-500:     #ff7a1a;
  --c-cloud-100:      #eaecf0;
  --c-paper-0:        #ffffff;

  /* ─── Extended scale (derived shades) ──────────────────────── */
  --c-violet-50:      #f5f0ff;
  --c-violet-100:     #ede4ff;
  --c-violet-200:     #d9c6ff;
  --c-violet-400:     #9a6cf2;
  --c-violet-700:     #5e22c9;
  --c-violet-900:     #3b1685;

  --c-orange-50:      #fff4ec;
  --c-orange-100:     #ffe2cb;
  --c-orange-400:     #ff9a55;
  --c-orange-600:     #e85f00;
  --c-orange-700:     #b54600;

  --c-ink-50:         #f6f7fa;
  --c-ink-100:        #eef0f4;
  --c-ink-200:        #d6d9e0;
  --c-ink-300:        #b8bdc8;
  --c-ink-400:        #9aa1b2;
  --c-ink-500:        #6b7280;
  --c-ink-700:        #414a63;
  --c-ink-800:        #2a3147;
  --c-ink-900:        #19223a;

  --c-emerald-500:    #16a34a;
  --c-emerald-50:     #e6f7ed;
  --c-amber-500:      #d97706;
  --c-amber-50:       #fef5e3;
  --c-rose-500:       #dc2626;
  --c-rose-50:        #fde8e8;
  --c-sky-500:        #2563eb;
  --c-sky-50:         #e3edff;

  /* ─── Semantic tokens (USE THESE in components) ────────────── */
  --color-bg:               var(--c-ink-50);
  --color-bg-subtle:        var(--c-ink-100);
  --color-bg-elevated:      var(--c-paper-0);
  --color-bg-inset:         var(--c-ink-100);
  --color-bg-overlay:       rgba(16, 24, 40, 0.55);

  --color-bg-dark:          var(--c-ink-950);
  --color-bg-dark-elevated: var(--c-eggplant-900);
  --color-bg-dark-inset:    rgba(255, 255, 255, 0.06);

  --color-text:             var(--c-ink-950);
  --color-text-muted:       var(--c-ink-700);
  --color-text-subtle:      var(--c-ink-500);
  --color-text-inverse:         var(--c-paper-0);
  --color-text-inverse-muted:   rgba(255, 255, 255, 0.72);

  --color-border:           rgba(16, 24, 40, 0.10);
  --color-border-strong:    rgba(16, 24, 40, 0.18);
  --color-border-inverse:   rgba(255, 255, 255, 0.12);

  --color-brand:            var(--c-violet-600);
  --color-brand-strong:     var(--c-violet-700);
  --color-brand-soft:       var(--c-violet-50);
  --color-brand-tint:       var(--c-violet-100);
  --color-brand-ink:        var(--c-violet-900);
  --color-on-brand:         var(--c-paper-0);

  --color-accent:           var(--c-orange-500);
  --color-accent-strong:    var(--c-orange-600);
  --color-accent-soft:      var(--c-orange-50);
  --color-accent-tint:      var(--c-orange-100);
  --color-accent-ink:       var(--c-orange-700);
  --color-on-accent:        var(--c-paper-0);

  --color-success:          var(--c-emerald-500);
  --color-success-soft:     var(--c-emerald-50);
  --color-warning:          var(--c-amber-500);
  --color-warning-soft:     var(--c-amber-50);
  --color-danger:           var(--c-rose-500);
  --color-danger-soft:      var(--c-rose-50);
  --color-info:             var(--c-sky-500);
  --color-info-soft:        var(--c-sky-50);

  --color-live:             var(--c-emerald-500);
  --color-live-glow:        rgba(22, 163, 74, 0.22);

  /* ─── Engine V2 dark surfaces ─────────────────────────────
     The engine "cockpit" runs on a dark theme by default. Cards step
     up from the page background; sidebar steps down to feel anchored.
     Borders are luminous (1-px white at 8% alpha) so the layout reads
     in dim rooms without competing with content. */
  --color-dark-page:      #0c1322;     /* page bg, slightly cooler than ink-950 */
  --color-dark-sidebar:   #0a0f1c;     /* sidebar (one step darker = grounded) */
  --color-dark-topbar:    #0e1525;     /* topbar wash */
  --color-dark-card:      #141b2d;     /* default card */
  --color-dark-card-2:    #1a2238;     /* nested / hover card */
  --color-dark-input:     #1d2540;     /* form fills, chip backgrounds */
  --color-dark-border:    rgba(255, 255, 255, 0.08);
  --color-dark-border-2:  rgba(255, 255, 255, 0.16);
  --color-dark-text:      #f5f6fa;     /* primary body text on dark */
  --color-dark-text-muted:rgba(245, 246, 250, 0.72);
  --color-dark-text-subtle:rgba(245, 246, 250, 0.50);

  /* ─── Typography ───────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Times New Roman', 'Georgia', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular,
                  'SF Mono', Menlo, monospace;

  --text-display:  clamp(54px, 7.5vw, 104px);
  --text-h1:       clamp(40px, 5.2vw, 64px);
  --text-h2:       clamp(28px, 3.6vw, 40px);
  --text-h3:       22px;
  --text-h4:       18px;
  --text-body-lg:  19px;
  --text-body:     16px;
  --text-body-sm:  14px;
  --text-caption:  12px;
  --text-micro:    11px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --tracking-display: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.011em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.08em;

  --leading-display: 0.98;
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.65;

  /* ─── Spacing scale (4-px base) ────────────────────────────── */
  --space-0:    0;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;

  /* ─── Radii ────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 4px rgba(16, 24, 40, 0.04);
  --shadow:       0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:    0 4px 14px rgba(16, 24, 40, 0.06), 0 8px 28px rgba(16, 24, 40, 0.04);
  --shadow-lg:    0 12px 32px rgba(16, 24, 40, 0.08), 0 24px 64px rgba(16, 24, 40, 0.06);
  --shadow-shell: 0 1px 0 rgba(0,0,0,0.04), 0 18px 50px rgba(16, 24, 40, 0.08);
  --shadow-brand-glow:  0 6px 24px rgba(124, 58, 237, 0.35);
  --shadow-accent-glow: 0 6px 24px rgba(255, 122, 26, 0.32);

  /* ─── Motion ───────────────────────────────────────────────── */
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  360ms;
  --duration-epic:  640ms;
  --ease-standard:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  /* ─── Z-index ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;

  /* ═══════════════════════════════════════════════════════════
     LEGACY ALIASES
     ───────────────────────────────────────────────────────────
     The landing page (styles.css) and the engine UI (app.css)
     were both written before the design system. Rather than
     touch every rule, we redefine their existing token names
     in terms of the new semantic tokens. Future code should use
     the --color-* / --text-* / --space-* tokens directly.
     ═══════════════════════════════════════════════════════════ */

  /* ── landing-example.html / styles.css ───────────────────── */
  --bg:           var(--color-bg);
  --bg-soft:      var(--color-bg-subtle);
  --bg-panel:     var(--color-bg-subtle);
  --ink:          var(--color-text);
  --ink-2:        var(--color-text-muted);
  --ink-3:        var(--color-text-subtle);
  --line:         var(--color-border);
  --line-2:       var(--color-border-strong);
  --paper:        var(--color-bg-elevated);
  --green:        var(--color-live);             /* live dot, "online" status */
  --green-glow:   var(--color-live-glow);
  /* Both surfaces use --warn for warning states (pending, missing, "watch out").
     Mapping to the semantic warning amber keeps that meaning intact. */
  --warn:         var(--color-warning);
  --warn-glow:    rgba(217, 119, 6, 0.10);

  /* ── engine app.css ──────────────────────────────────────── */
  --bg-page:      var(--color-bg);
  --surface:      var(--color-bg-elevated);
  --surface-2:    var(--color-bg-subtle);
  --surface-3:    var(--c-ink-200);
  --muted:        var(--color-text-subtle);
  --rule:         var(--color-border);
  --rule-2:       var(--color-border-strong);
  /* Engine's brand accent flips from green → violet. Everywhere the
     engine UI calls --accent / --accent-2 / --accent-soft etc, it
     now picks up the new brand. */
  --accent:       var(--color-brand);
  --accent-2:     var(--color-brand-strong);
  --accent-3:     var(--c-violet-900);
  --accent-soft:  var(--color-brand-soft);
  --accent-mint:  var(--c-violet-400);
  --accent-tint:  var(--color-brand-tint);
  --ok:           var(--color-success);
  --ok-soft:      var(--color-success-soft);
  --warn-soft:    var(--color-warning-soft);
  --bad:          var(--color-danger);
  --bad-soft:     var(--color-danger-soft);
  --info:         var(--color-info);
  --info-soft:    var(--color-info-soft);

  /* ─── Brand surface gradients (light default) ──────────────── */
  --grad-page:        none;
  --grad-brand:       linear-gradient(135deg, var(--c-violet-600), var(--c-violet-700));
  --grad-spot:        none;

  /* ─── Luxury CTA gradient — light violet deepening into dark midnight
         violet. Shared by every primary "Run check" button. ────────── */
  --grad-cta:         linear-gradient(135deg, var(--c-violet-400) 0%, var(--c-violet-700) 55%, var(--c-eggplant-900) 100%);
  --grad-cta-hover:   linear-gradient(135deg, var(--c-violet-400) 0%, var(--c-violet-600) 55%, var(--c-violet-900) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   THEME · midnight  (dark midnight-violet + graphite, "luxury")
   ───────────────────────────────────────────────────────────────
   SINGLE SOURCE OF TRUTH for the dark brand look. Any surface opts
   in by setting  <html data-theme="midnight">  — nothing else has
   to change, because this block only re-points the SEMANTIC tokens
   (and the few legacy aliases that need a different dark value).
   Every component reads var(--color-*) / var(--bg|--ink|--paper…),
   so the whole UI re-skins from this one edit. To retune the brand,
   change the swatches + gradients here and ship.

   Palette (brand swatches):
     Onyx #0A0A0B · Carbon #17171A · Shadow #2B2B31 · Dim #6B6F7A
     Midnight Violet #241B3B · Blue Violet #7C3AED
     Pumpkin #FF7A1A · Parchment #F7F4ED
   Placed AFTER :root so it wins on source order at equal specificity.
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="midnight"],
[data-theme="midnight"] {
  /* primitive additions */
  --c-onyx:           #0a0a0b;
  --c-carbon:         #17171a;
  --c-shadow:         #2b2b31;
  --c-dim:            #6b6f7a;
  --c-parchment:      #f7f4ed;

  /* ── Surfaces — graphite stepping up toward midnight violet ── */
  --color-bg:               #0a0a0d;
  --color-bg-subtle:        #121118;
  --color-bg-elevated:      #17151f;   /* default card */
  --color-bg-inset:         #1f1c2b;
  --color-bg-overlay:       rgba(6, 5, 10, 0.66);

  --color-bg-dark:          #120f1c;
  --color-bg-dark-elevated: #241b3b;   /* midnight violet */
  --color-bg-dark-inset:    rgba(255, 255, 255, 0.06);

  /* ── Text — parchment, never pure white ── */
  --color-text:             #f7f4ed;
  --color-text-muted:       rgba(247, 244, 237, 0.70);
  --color-text-subtle:      rgba(247, 244, 237, 0.45);
  --color-text-inverse:         #0a0a0d;
  --color-text-inverse-muted:   rgba(10, 10, 13, 0.66);

  /* ── Hairlines — luminous, low alpha ── */
  --color-border:           rgba(247, 244, 237, 0.10);
  --color-border-strong:    rgba(247, 244, 237, 0.20);
  --color-border-inverse:   rgba(10, 10, 13, 0.12);

  /* ── Brand violet — lift the working shades for dark contrast ── */
  --color-brand:            #8b5cf6;
  --color-brand-strong:     #7c3aed;
  --color-brand-soft:       rgba(124, 58, 237, 0.16);
  --color-brand-tint:       rgba(139, 92, 246, 0.30);
  --color-brand-ink:        #c9b4fb;   /* light violet for text/eyebrows */
  --color-on-brand:         #ffffff;

  /* ── Pumpkin accent — used sparingly as the luxe spark ── */
  --color-accent:           #ff7a1a;
  --color-accent-strong:    #ff9a55;
  --color-accent-soft:      rgba(255, 122, 26, 0.16);
  --color-accent-tint:      rgba(255, 122, 26, 0.28);
  --color-accent-ink:       #ffb27a;
  --color-on-accent:        #1a1206;

  /* ── Status — brightened so they read on graphite ── */
  --color-success:          #34d399;
  --color-success-soft:     rgba(52, 211, 153, 0.14);
  --color-warning:          #fbbf24;
  --color-warning-soft:     rgba(251, 191, 36, 0.14);
  --color-danger:           #fb7185;
  --color-danger-soft:      rgba(251, 113, 133, 0.14);
  --color-info:             #60a5fa;
  --color-info-soft:        rgba(96, 165, 250, 0.14);

  --color-live:             #34d399;
  --color-live-glow:        rgba(52, 211, 153, 0.24);

  /* ── Luxury gradients (the reason it doesn't read "flat dark") ── */
  --grad-page:
    radial-gradient(1200px 680px at 78% -8%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(36, 27, 59, 0.55), transparent 55%),
    linear-gradient(180deg, #0c0a13 0%, #0a0a0d 42%, #08070b 100%);
  --grad-brand:       linear-gradient(135deg, #8b5cf6 0%, #6d28d9 60%, #241b3b 100%);
  --grad-spot:        radial-gradient(120% 120% at 50% 0%, rgba(124, 58, 237, 0.22), transparent 70%);

  /* ── Shadows — deeper + a violet glow on the page ── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.30);
  --shadow:       0 2px 10px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md:    0 8px 28px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-lg:    0 24px 64px rgba(0,0,0,0.60), 0 8px 24px rgba(0,0,0,0.40);
  --shadow-shell: 0 1px 0 rgba(255,255,255,0.04), 0 24px 70px rgba(0,0,0,0.55);
  --shadow-brand-glow:  0 8px 30px rgba(124, 58, 237, 0.50);
  --shadow-accent-glow: 0 8px 30px rgba(255, 122, 26, 0.42);

  /* ── Legacy aliases that need an explicit dark value ──────────
     (most cascade automatically via the semantic tokens above; we
     pin the ones the landing references with their own meaning.) */
  --bg-panel:     #141019;        /* darker violet-graphite wash for headers/footers */
  --warn:         var(--color-warning);
  --warn-glow:    rgba(251, 191, 36, 0.12);
  --green:        var(--color-live);
  --green-glow:   var(--color-live-glow);
  --surface-3:    var(--c-shadow);
  --accent-mint:  var(--color-brand-ink);
}

/* ═══════════════════════════════════════════════════════════════
   Optional utility primitives
   These don't touch any existing class names — they're additive
   helpers that new code can opt into.
   ═══════════════════════════════════════════════════════════════ */

.t-display { font-family: var(--font-display); font-weight: var(--weight-semibold);
             letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
.t-sans    { font-family: var(--font-sans); }
.t-mono    { font-family: var(--font-mono); }

.surface-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}
.surface-dark a { color: var(--c-violet-200); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}