/* ═══════════════════════════════════════════════════════════════════════════
   MIDDLE SEAT DESIGN KIT — v2
   ms-tokens.css · the built-ins

   Every value the system owns, once. Phase one hardcoded these hexes inline
   several hundred times across six documents; v2 declares them here and
   everything downstream reads the variable.

   Layers, in order:
     1. Raw palette    — the named brand colors. Never changes per mode.
     2. Type / space / radius / elevation / motion — mode-independent.
     3. Semantic roles — what a color MEANS on a surface. Mode-dependent.

   Rule: components reference LAYER 3 (--ms-canvas, --ms-action, --ms-body).
   Reach into layer 1 (--ms-peach) only when the brand color itself is the
   point — a swatch, a chart series, a gradient stop.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────── */

@font-face{font-family:'Cardo';src:url('fonts/Cardo-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cardo';src:url('fonts/Cardo-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cardo';src:url('fonts/Cardo-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Antarctican Mono';src:url('fonts/AntarcticanMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root {

  /* ═════ LAYER 1 — RAW PALETTE ═══════════════════════════════════════════
     Source: MS-Brand-Guidelines-V2 + MS-Color-Guide-V4 + design-tokens.md.
     Lavender and Slate are one 12-step neutral ramp: light mode lives at the
     top, dark mode at the bottom.                                          */

  --ms-lavender-1:#F6F4FA;   /* primary · light canvas                      */
  --ms-lavender-2:#EAE6F2;   /* highlights, alt background                  */
  --ms-lavender-3:#CEC8D9;   /* borders, shapes · dark-mode body text       */
  --ms-lavender-4:#B3ACBF;   /* shapes, key dividers (2px)                  */
  --ms-lavender-5:#9891A6;   /* shapes · dark-mode captions                 */
  --ms-lavender-6:#7E778C;   /* shapes, dark backgrounds                    */
  --ms-lavender-7:#655F73;   /* shapes, bg · short text, large only         */
  --ms-slate-1:#4D4759;      /* primary · light-mode body text              */
  --ms-slate-2:#363140;      /* headings · elevated dark surfaces           */
  --ms-slate-3:#201D26;      /* dark-mode canvas (2026 sites)               */
  --ms-slate-4:#1A171E;      /* text, backgrounds, nav chips                */
  --ms-slate-5:#0A090D;      /* primary · near-black, label on accent fills */

  /* Accents — Tutti Frutti (warm) */
  --ms-cantaloupe:#F2A26D;   /* secondary · shapes only                     */
  --ms-orange:#FFBA8C;       /* secondary · shapes, highlights              */
  --ms-peach:#FFBCAD;        /* PRIMARY · the dark-mode working accent      */
  --ms-watermelon:#FFADAD;   /* primary · all uses incl. short text         */

  /* Accents — Berries */
  --ms-strawberry:#EDC1CC;   /* shapes, bg, short text · highlight bars     */
  --ms-blueberry:#C98D9C;    /* shapes, short text · chart series           */
  --ms-blackberry:#B37D8A;   /* shapes, short text · stat numerals          */

  /* Accents — Greens */
  --ms-lime:#CED998;         /* shapes, highlights · raw Dem series         */
  --ms-pistachio:#74A686;    /* the mark color · leader in any chart        */

  /* Links */
  --ms-cotton-candy:#A0C2FA; /* links on dark                               */
  --ms-blue-moon:#3A51FE;    /* links on light · AA on Lavender 1–2         */

  /* Minted in phase two, ratified July 2026 (flags F11 + forms review).
     Neither exists in the 2020 brand book; both are oklch derivations. */
  --ms-evergreen:#3E7457;        /* action fills · Lavender 1 label, 5.6:1  */
  --ms-evergreen-hover:#335F4A;
  --ms-cherry:#AE4752;           /* light-mode error — the palette had none */

  /* Gradients — two-stop blends, used as BANDS, never washes */
  --ms-grapefruit:linear-gradient(0deg,#FFADAD 0%,#FFBCAD 100%);   /* primary   */
  --ms-grapefruit-x:linear-gradient(90deg,#FFADAD 0%,#FFBCAD 100%);/* table caps */
  --ms-peppermint:linear-gradient(0deg,#CED998 0%,#74A686 100%);   /* secondary */
  /* Sherbet is RETIRED — named in the Color Guide with no stops (flag F15). */

  /* ═════ LAYER 2 — TYPE ══════════════════════════════════════════════════
     Four faces, strict jobs. Cardo speaks, Proxima explains, Antarctican
     labels, New Atten is social-only and never enters the web bundle (F8). */

  --ms-font-display:Cardo,Georgia,'Times New Roman',serif;
  --ms-font-body:proxima-nova,'Proxima Nova','Helvetica Neue',Arial,sans-serif;
  --ms-font-mono:'Antarctican Mono','Space Mono',ui-monospace,SFMono-Regular,monospace;

  /* Scale — web, 1440px frame. size / line-height / tracking */
  --ms-display-xl:72px;   --ms-display-xl-lh:1.06;  --ms-display-xl-ls:-0.01em;
  --ms-display:56px;      --ms-display-lh:1.12;     --ms-display-ls:-0.01em;
  --ms-h1:44px;           --ms-h1-lh:1.18;
  --ms-h2:30px;           --ms-h2-lh:1.25;
  --ms-h3:24px;           --ms-h3-lh:1.3;
  --ms-lede:21px;         --ms-lede-lh:1.5;
  --ms-title-s:16px;      --ms-title-s-lh:1.4;
  --ms-body:16px;         --ms-body-lh:1.65;
  --ms-body-s:13.5px;     --ms-body-s-lh:1.6;
  --ms-eyebrow:12.5px;    --ms-eyebrow-ls:0.22em;
  --ms-label:11.5px;      --ms-label-ls:0.18em;
  --ms-data:11px;         --ms-data-ls:0.14em;
  --ms-micro:9.5px;       --ms-micro-ls:0.16em;

  /* ═════ LAYER 2 — SPACE · RADIUS · ELEVATION ══════════════════════════ */

  --ms-s1:4px;  --ms-s2:8px;  --ms-s3:12px; --ms-s4:14px;
  --ms-s5:18px; --ms-s6:24px; --ms-s7:32px; --ms-s8:48px;
  --ms-s9:56px; --ms-s10:72px; --ms-s11:88px;

  --ms-wrap:1240px;        /* every page's content column                  */
  --ms-gutter:48px;        /* product surfaces                             */
  --ms-gutter-wide:56px;   /* editorial / marketing surfaces               */

  --ms-r-sm:6px;           /* product buttons, chips                       */
  --ms-r-md:8px;           /* mobile controls, segmented tracks            */
  --ms-r-lg:10px;          /* small cards, wells                           */
  --ms-r-xl:12px;          /* the default card                             */
  --ms-r-2xl:14px;         /* modals                                       */
  --ms-r-pill:999px;       /* marketing CTAs, tags, status                 */

  --ms-shadow-pop:0 1px 3px rgba(54,49,64,0.15);
  --ms-shadow-raise:0 2px 8px rgba(54,49,64,0.25);
  --ms-shadow-float:0 8px 24px rgba(10,9,13,0.25);
  --ms-shadow-modal:0 24px 70px rgba(10,9,13,0.35);

  /* ═════ LAYER 2 — MOTION ══════════════════════════════════════════════
     v2 unifies the two motion systems phase one shipped. Layout and state
     run on the house spring; hover / press / focus keep the CSS curve
     because they are feedback, not layout. Read by ms-spring.js.          */

  --ms-spring-mass:1;
  --ms-spring-stiffness:120;    /* the house spring — fluid, zero overshoot */
  --ms-spring-damping:20;
  --ms-spring-snappy:300,26;    /* progress fills, short travel             */
  --ms-spring-viscous:80,24;    /* heavy panels                             */

  --ms-ease:cubic-bezier(0.2,0,0.2,1);
  --ms-dur-feedback:150ms;      /* hover, press, focus, tooltip, dropdown   */
  --ms-dur-surface:200ms;       /* modal, toast, accordion, drawer          */
  --ms-dur-chart:250ms;         /* first paint fade, once — never loops     */
  --ms-dur-shimmer:1.4s;        /* skeletons: the ONLY looping animation    */
}

/* ═════ LAYER 3 — SEMANTIC ROLES ═════════════════════════════════════════
   Set data-ms-mode="dark" or "light" on any element to switch the whole
   subtree. Phase one duplicated markup to show both modes; v2 flips an
   attribute. A single component never mixes modes — pages may stack
   full-bleed dark and light sections, but the boundary is a section edge. */

[data-ms-mode="dark"] {
  --ms-canvas:var(--ms-slate-3);
  --ms-surface:var(--ms-slate-2);          /* elevated card                 */
  --ms-surface-alt:var(--ms-slate-4);      /* nav chips, sunken wells       */
  --ms-surface-input:rgba(246,244,250,0.05);

  --ms-heading:var(--ms-lavender-1);
  --ms-body-color:var(--ms-lavender-3);
  --ms-muted:var(--ms-lavender-5);
  --ms-faint:var(--ms-lavender-6);

  --ms-border:rgba(246,244,250,0.10);      /* hairline                      */
  --ms-border-strong:rgba(246,244,250,0.16);
  --ms-rule:rgba(246,244,250,0.09);        /* section dividers              */

  --ms-accent:var(--ms-peach);             /* CTAs, eyebrows, strokes       */
  --ms-accent-hover:var(--ms-watermelon);
  --ms-on-accent:var(--ms-slate-5);        /* F11 — never white on a fill   */

  --ms-action:var(--ms-evergreen);         /* identity holds across modes   */
  --ms-action-hover:var(--ms-evergreen-hover);
  --ms-on-action:var(--ms-lavender-1);

  --ms-link:var(--ms-cotton-candy);
  --ms-mark:var(--ms-pistachio);           /* rings, tints, chart leader    */
  --ms-positive:var(--ms-pistachio);
  --ms-negative:var(--ms-watermelon);      /* Cherry is light-mode only     */
  --ms-warning:var(--ms-cantaloupe);
  --ms-selected:rgba(116,166,134,0.08);
  --ms-focus:rgba(116,166,134,0.35);

  --ms-motif-opacity:0.07;
}

[data-ms-mode="light"] {
  --ms-canvas:var(--ms-lavender-1);        /* never pure white              */
  --ms-surface:#FFFFFF;                    /* cards, plot areas             */
  --ms-surface-alt:var(--ms-lavender-2);
  --ms-surface-input:#FFFFFF;

  --ms-heading:var(--ms-slate-2);
  --ms-body-color:var(--ms-slate-1);
  --ms-muted:var(--ms-lavender-7);         /* large text only, 18px+        */
  --ms-faint:var(--ms-lavender-6);

  --ms-border:var(--ms-lavender-3);
  --ms-border-strong:var(--ms-lavender-4); /* 2px key dividers              */
  --ms-rule:var(--ms-lavender-3);

  --ms-accent:var(--ms-peach);
  --ms-accent-hover:var(--ms-watermelon);
  --ms-on-accent:var(--ms-slate-5);

  --ms-action:var(--ms-evergreen);
  --ms-action-hover:var(--ms-evergreen-hover);
  --ms-on-action:var(--ms-lavender-1);

  --ms-link:var(--ms-blue-moon);
  --ms-mark:var(--ms-pistachio);
  --ms-positive:var(--ms-pistachio);
  --ms-negative:var(--ms-cherry);
  --ms-warning:var(--ms-cantaloupe);
  --ms-selected:rgba(116,166,134,0.05);
  --ms-focus:rgba(116,166,134,0.35);

  --ms-motif-opacity:0.35;
}

/* Chart series — assignment logic is identical in both modes, so it lives
   outside the mode blocks. The leader in any comparison is always Pistachio. */
:root {
  --ms-series-us-raw:var(--ms-lime);
  --ms-series-us:var(--ms-pistachio);
  --ms-series-them-raw:var(--ms-strawberry);
  --ms-series-them:var(--ms-blackberry);
  --ms-series-feature:var(--ms-peach);
  --ms-series-compare:var(--ms-cantaloupe);
  /* Categorical stacks run in kit order, always this order: */
  --ms-cat-1:var(--ms-strawberry);
  --ms-cat-2:var(--ms-blueberry);
  --ms-cat-3:var(--ms-lime);
  --ms-cat-4:var(--ms-orange);
  --ms-cat-5:var(--ms-lavender-4);
}

/* Reduced motion — springs snap to target; nothing is lost but the glide.
   ms-spring.js reads the same query and skips integration entirely. */
@media (prefers-reduced-motion: reduce) {
  :root { --ms-dur-feedback:0ms; --ms-dur-surface:0ms; --ms-dur-chart:0ms; }
}