/* ============================================================================
   NORTH SPIRIT VODKA — DESIGN TOKENS  v1.0
   Generated from the brand manual v1.0. Every value here traces to a page in it.
   Drop this file in first; nothing else should declare a raw colour or size.
   ========================================================================== */

:root {
  /* ── COLOUR · core palette ──────────────────────────────── manual p.15 ── */
  --ns-ink:            #0F1720;
  --ns-blue-deep:      #1E3145;
  --ns-blue-surface:   #24354A;
  --ns-blue:           #3A5A71;
  --ns-blue-bright:    #5B93B8;
  --ns-blue-light:     #B9D3E4;
  --ns-ice:            #F2F6F9;
  --ns-white:          #FFFFFF;
  --ns-cork:           #C9A06A;

  /* ── COLOUR · neutrals ─────────────────────────────────── manual p.16 ── */
  --ns-slate:          #5A6B7A;   /* body on light — never #000 */
  --ns-dim:            #596876;   /* captions on light — darkened from the manual's
                                     #687887, which measures 4.18:1 on ice and fails AA */
  --ns-slate-light:    #8FA0AE;   /* muted, disabled */
  --ns-mist:           #C2D2DF;   /* body on deep blue */
  --ns-fog:            #A8B6C2;   /* body on ink */
  --ns-dim-dark:       #8FA0AE;   /* captions on dark — lifted from the manual's #7A8A97,
                                     which measures 4.31:1 on the ink card fill and fails */

  --ns-line:           #D9E2E9;
  --ns-grid:           #DCE4EB;
  --ns-rule-light:     #A8C6DA;
  --ns-header-fill:    #E3EBF1;
  --ns-line-blue:      #2C4157;
  --ns-line-dark:      #1C2A38;
  --ns-grid-dark:      #2A3F55;
  --ns-rule-dark:      #33718F;

  /* ── COLOUR · roles, and their darkened partners for type on light ── p.18 */
  --ns-brand:          #5B93B8;   --ns-brand-on-light:   #3A5A71;
  --ns-alpha:          #A9BACB;   --ns-alpha-on-light:   #5F7488;
  --ns-luna:           #C87F9E;   --ns-luna-on-light:    #A05575;
  --ns-teal:           #46C0AE;   --ns-teal-on-light:    #1F8E80;
  --ns-cork-on-light:  #9A7440;   /* 3.91:1 on ice — large text and graphics only */
  --ns-cork-ink:       #805D34;   /* the small-text partner, 5.2:1 on the warm fill */
  --ns-teal-ink:       #17756A;   /* 4.8:1 on the teal fill */
  --ns-luna-ink:       #8E4666;   /* 5.6:1 on the rose fill */
  --ns-warn-ink:       #A2491A;   /* 5.2:1 on the warn fill */

  /* ── COLOUR · surfaces, per ground ─────────────────────── manual p.17 ── */
  --ns-surface:            #FFFFFF;
  --ns-surface-recessed:   #E9F0F5;
  --ns-surface-warm:       #F6EFE3;
  --ns-surface-teal:       #E2F2EF;
  --ns-surface-rose:       #F7EAF0;

  /* ── COLOUR · feedback ──────────────────────────────────────────────── */
  --ns-warn:           #B5551A;   --ns-warn-field:      #FBEBDD;
  --ns-success:        #1F8E80;   --ns-success-field:   #E2F2EF;
  --ns-danger:         #C0392B;   --ns-danger-field:    #FBEAE8;

  /* ── SEMANTIC · the light theme, which is the default ───────────────── */
  --bg:                var(--ns-ice);
  --bg-elevated:       var(--ns-white);
  --bg-recessed:       var(--ns-surface-recessed);
  --fg:                var(--ns-ink);
  --fg-muted:          var(--ns-slate);
  --fg-subtle:         var(--ns-dim);
  --accent:            var(--ns-blue-on-light, var(--ns-blue));
  --accent-strong:     var(--ns-blue-bright);
  --border:            var(--ns-line);
  --border-strong:     var(--ns-rule-light);
  --focus:             var(--ns-blue-bright);

  /* ── TYPE ───────────────────────────────────────────── manual p.22–23 ── */
  /* Neither brand face has a lowercase, so neither can set a paragraph.     */
  --font-display: "Black River", "Inter Tight", system-ui, sans-serif; /* CAPS ONLY */
  --font-label:   "Colus", "Inter Tight", Georgia, serif;              /* CAPS ONLY */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* a 1.25 major-third scale, clamped so it breathes on a phone */
  --text-2xs:   0.6875rem;                              /* 11px */
  --text-xs:    0.75rem;                                /* 12 */
  --text-sm:    0.875rem;                               /* 14 */
  --text-base:  1rem;                                   /* 16 — never smaller for body */
  --text-lg:    1.125rem;                               /* 18 */
  --text-xl:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:   clamp(1.5rem,  1.3rem + 1.0vw, 2rem);
  --text-3xl:   clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --text-4xl:   clamp(2.25rem, 1.6rem + 3.0vw, 4rem);
  --text-5xl:   clamp(2.75rem, 1.6rem + 5.2vw, 6rem);

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.6;   /* body — 60–80 characters a line */
  --leading-loose:  1.75;

  --tracking-display: 0.06em;   /* Black River, tracked open */
  --tracking-label:   0.14em;   /* kickers and eyebrows */
  --tracking-tight:   -0.02em;  /* large Inter headlines */
  --tracking-normal:  0;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ── SPACE · a 4px base, so every gap is a multiple of it ───────────── */
  --space-1:  0.25rem;  --space-2:  0.5rem;   --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.5rem;   --space-6:  2rem;
  --space-7:  3rem;     --space-8:  4rem;     --space-9:  6rem;
  --space-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);   /* vertical rhythm between sections */

  /* ── LAYOUT ─────────────────────────────────────────────────────────── */
  --container:      75rem;    /* 1200px — the content column */
  --container-wide: 90rem;    /* 1440px — full-bleed sections */
  --container-text: 42rem;    /* 672px — long-form reading measure */
  --gutter:         clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ── RADIUS · one small radius, applied consistently ────── manual p.27 ── */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ── ELEVATION · the manual bans shadows on cards; these are for       ──
       overlays only — a menu, a dialog, a toast, and nothing else.        */
  --shadow-overlay: 0 1px 2px rgba(15,23,32,.06), 0 12px 32px rgba(15,23,32,.14);
  --shadow-raised:  0 1px 2px rgba(15,23,32,.05), 0 4px 12px rgba(15,23,32,.08);

  /* ── MOTION · cold and exact, like the brand. Nothing bounces. ──────── */
  --ease:        cubic-bezier(.2, .6, .2, 1);
  --ease-out:    cubic-bezier(0, .6, .3, 1);
  --dur-fast:    120ms;
  --dur:         220ms;
  --dur-slow:    420ms;

  /* ── FOCUS · visible, always, and never removed ─────────────────────── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  --z-header: 100;
  --z-overlay: 900;
  --z-gate: 1000;
}

/* ── THE DARK GROUNDS ─────────────────────────────────────── manual p.19 ──
   Applied per section, not per site: a page alternates ice and dark exactly
   as a document alternates its four grounds.                               */
[data-ground="blue"] {
  --bg: var(--ns-blue-deep);       --bg-elevated: var(--ns-blue-surface);
  --bg-recessed: #1A2C3E;
  --fg: var(--ns-white);           --fg-muted: var(--ns-mist);
  --fg-subtle: #93A9BC;
  --accent: var(--ns-blue-light);  --accent-strong: var(--ns-blue-bright);
  --border: var(--ns-line-blue);   --border-strong: #4E7A96;
  --focus: var(--ns-blue-light);
  --ns-surface-warm: #2E2A1E; --ns-surface-teal: #17383A; --ns-surface-rose: #332530;
  color-scheme: dark;
}
[data-ground="ink"] {
  --bg: var(--ns-ink);             --bg-elevated: #1A2634;
  --bg-recessed: #16202C;
  --fg: var(--ns-white);           --fg-muted: var(--ns-fog);
  --fg-subtle: var(--ns-dim-dark);
  --accent: var(--ns-blue-bright); --accent-strong: var(--ns-blue-light);
  --border: var(--ns-line-dark);   --border-strong: var(--ns-rule-dark);
  --focus: var(--ns-blue-bright);
  --ns-surface-warm: #241F14; --ns-surface-teal: #102E2C; --ns-surface-rose: #2A1D24;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}