/* ==========================================================================
   tokens.css — the only file you edit to re-skin the site.
   --------------------------------------------------------------------------
   Layer 1 (PRIMITIVES) are raw ramps. Hue lives here and nowhere else.
   Layer 2 (SEMANTIC)  are the roles components reference.

   Components must NEVER reference a Layer 1 primitive. If you find yourself
   wanting to, add a Layer 2 role instead — that is what keeps a palette swap
   to this one file.

   Current palette: indigo — v1's AI-Intelligence band (#1E1B4B → #312E81)
   with its orange/violet glows and glass cards.
   The v1 brand purple/orange is kept as an alternate:
     http://localhost:5001/?palette=purple      (debug only)
     PALETTE=purple .venv/bin/python app.py
   ========================================================================== */

:root {
  /* ---------- LAYER 1 · PRIMITIVES ------------------------------------ */

  /* Brand ramp — structural surfaces, headings, links */
  --brand-950: #14123a;   /* card fill on the dark band */
  --brand-900: #1e1b4b;   /* gradient start — v1's AI section */
  --brand-800: #312e81;   /* gradient end */
  --brand-700: #4338ca;   /* headings */
  --brand-600: #6d5ce7;   /* links, highlight borders */
  --brand-500: #8b5cf6;   /* v1 violet */
  --brand-300: #c4b5fd;
  --brand-100: #ede9fe;
  --brand-050: #fbfcfe;   /* panel tint */

  /* Action ramp — brand orange. Navy carries structure, orange carries
     attention: every primary action and every "look here" accent. Keeping the
     two jobs separate is what stops the orange reading as decoration. */
  --act-700: #a35400;
  --act-600: #cc6a00;
  --act-500: #ff8300;   /* v1 brand orange */
  --act-300: #ffb05c;
  --act-200: #ffd9a8;
  --act-050: #fff6ea;

  /* Neutrals */
  --ink-900: #0e1726;
  --ink-700: #374151;   /* body / secondary text — charcoal for readability (marketing, 2026-09-30) */
  --ink-500: #6b7280;
  --ink-300: #aab6c6;
  --white:    #ffffff;
  --paper:    #fbfcfe;   /* page background */
  --hair-200: #e6ebf2;
  --hair-300: #d3dbe6;

  /* Notes — the designer's wireframe annotations. Deliberately off-brand so
     they never read as page content. */
  --note-ink: #b0483a;
  --note-bg:  #fdf3f1;

  /* Type — three roles, doing three different jobs.
     Display carries the editorial voice; mono carries anything that is data,
     a label, or a citation; sans carries prose and UI. The mix is most of
     what separates this from a wireframe rendered in one typeface. */
  --font-display: "Charter", "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* No monospace anywhere on the site (by request) — the "data" role now uses
     the sans stack with tabular figures, so labels and numbers still align. */
  --font-mono: var(--font-sans);

  /* Tuned to the wireframe's density: an information-dense B2B page, not a
     spacious consumer landing. Body 14px, meta 12px. */
  --step--2: 0.6875rem;   /* 11px — tags, meta only */
  --step-label: 0.8125rem; /* 13px — section kickers / eyebrows */
  --step--1: 0.75rem;     /* 12px — meta, exhibit lines */
  --step-0:  0.875rem;    /* 14px — body */
  --step-1:  0.9375rem;   /* 15px — lead paragraphs */
  --step-2:  1.1875rem;   /* 19px — card titles */
  --step-3:  1.5rem;      /* 24px — section titles */
  --step-4:  clamp(1.75rem, 3.2vw, 2.375rem);  /* solution hero */
  --step-5:  clamp(2.125rem, 4vw, 3rem);       /* landing hero strip */

  /* Tracking — display sizes need negative tracking to hold together */
  --track-display: -0.018em;
  --track-eyebrow:  0.14em;

  /* Space — 4px base */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;

  /* Shape */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border: 1px;
  --shadow-sm: 0 1px 2px rgba(13, 36, 64, .05);
  --shadow:    0 2px 10px rgba(13, 36, 64, .08);
  --shadow-lg: 0 12px 32px -12px rgba(13, 36, 64, .22);
  --inset-hair: inset 0 1px 0 rgba(255, 255, 255, .5);

  --wrap: 1180px;
  --wrap-wide: 1600px;   /* solutions band — breathes on large screens */

  /* ---------- LAYER 2 · SEMANTIC ROLES -------------------------------- */

  /* Surfaces */
  --surface:         var(--white);
  --surface-sunken:  var(--paper);
  --surface-tint:    var(--brand-050);
  --surface-invert:  var(--brand-900);
  --surface-card-dark: var(--brand-950);   /* cards DARKER than their band */
  /* Solutions band. Defaults to the inverted (dark) treatment, but broken out
     so a light palette can flip this one section without touching contact,
     the webinar band or the blog cards. */
  --surface-solutions:      var(--surface-invert);
  --card-solutions:         rgba(255,255,255,.05);
  --line-solutions:         rgba(255,255,255,.12);
  --text-solutions:         #ffffff;
  --text-solutions-soft:    rgba(255,255,255,.72);
  --text-solutions-kicker:  var(--act-500);
  /* Optional decoration for the solutions band. Unset by default, so every
     other palette renders a flat surface exactly as before. */
  --solutions-fx: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  --solutions-glow-1: radial-gradient(circle, rgba(255,131,0,.15) 0%, transparent 70%);
  --solutions-glow-2: radial-gradient(circle, rgba(139,92,246,.20) 0%, transparent 70%);
  --card-blur: blur(20px);        /* glass cards need the gradient behind them */
  --line-dark:       #322f6b;              /* hairline on indigo */
  --surface-invert-deep: var(--brand-950);
  --surface-accent:  var(--brand-100);
  /* Alternating band so sections don't read as one undifferentiated column */
  --surface-band:    #f4f7fb;   /* banded sections — cool, one step down from the page */
  /* Product-chrome header on exhibits and data panels */
  --surface-chrome:  #f4f7fb;

  /* Text */
  --text:            var(--ink-900);
  --text-soft:       var(--ink-700);
  --text-faint:      var(--ink-500);
  --text-kicker:     var(--ink-700);
  --text-heading:    var(--brand-700);
  --text-on-invert:  var(--white);
  --text-on-invert-soft:   #9fb2c8;
  --text-on-invert-kicker: var(--act-500);

  /* Lines */
  --line:            var(--hair-200);
  --line-strong:     var(--hair-300);
  --line-accent:     var(--brand-600);
  --dashed-invert:   var(--brand-300);   /* dashed rules on dark panels */

  /* Interaction */
  --accent:          var(--brand-600);
  --accent-hover:    var(--brand-700);
  --action:          var(--act-500);
  --action-hover:    var(--act-600);
  --action-text:       var(--white);   /* white on #FF8300 — house style */
  --action-text-hover: var(--white);
  /* Decorative warm accent: rules, dots, markers. Never body text. */
  --accent-warm:     var(--act-500);
  --accent-warm-soft: var(--act-200);
  --focus:           var(--brand-600);

  /* Buttons sitting on an inverted panel */
  --btn-invert-bg:         var(--white);
  --btn-invert-text:       var(--brand-800);
  --btn-invert-hover-bg:   var(--act-500);
  --btn-invert-hover-text: var(--white);

  /* Data viz / status */
  --bar:             var(--brand-300);
  --bar-high:        var(--brand-600);
  --live:            #0f7a67;
  --live-bg:         #e6f4f0;
  --diff-rm-bg:      #fbeaec;
  --diff-rm-ink:     #8c1220;
  --diff-add-bg:     #e6f4f0;
  --diff-add-ink:    #0b5a4c;
}

/* Dark theme — remaps Layer 2 only. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #101823;
    --surface-sunken: #0b1119;
    --surface-tint:   #16202e;
    --surface-accent: #1d2c40;

    --text:           #e6edf5;
    --text-soft:      #b3bfcd;
    --text-faint:     #84909f;
    --text-kicker:    #84909f;
    --text-heading:   var(--brand-300);

    --line:           #222e3d;
    --line-strong:    #32404f;

    --accent:         var(--brand-300);
    --accent-hover:   #c2dcf5;

    --btn-invert-text: var(--brand-900);
  }
}

:root[data-theme="dark"] {
  --surface:        #101823;
  --surface-sunken: #0b1119;
  --surface-tint:   #16202e;
  --surface-accent: #1d2c40;
  --text:           #e6edf5;
  --text-soft:      #b3bfcd;
  --text-faint:     #84909f;
  --text-kicker:    #84909f;
  --text-heading:   var(--brand-300);
  --line:           #222e3d;
  --line-strong:    #32404f;
  --accent:         var(--brand-300);
  --accent-hover:   #c2dcf5;
  --btn-invert-text: var(--brand-900);
}

/* The site is designed light-only: base.html sets data-theme="light", which
   disables the OS dark-mode remap above (it left light text on light bands).
   color-scheme keeps form controls and scrollbars light too. */
:root[data-theme="light"]{color-scheme:light}