/* ============================================================================
   integral-ops — Umbrella Brand Tokens v1
   Canonical token set for every *.integral.sg surface.
   Source of truth: KIZUNA-SITE-vStudio-2.html (Studio, 2026-04).
   Location (source):  Iksha/integral-ops/brand/system/tokens-v1.css
   Location (served):  https://integral.sg/brand/tokens-v1.css
   Generated:          2026-04-20
   Supersedes:         tokens-v0.css (marked DEPRECATED — v0 still loads for
                       surfaces not yet migrated; see migration guide in
                       STYLE-GUIDE.md § 12).

   Naming change vs v0: unprefixed palette (--navy, --gold, --rule) matches
   the Kizuna artefact and eliminates the --color-* double-hop. Semantic
   surface aliases (--surface-bg, --surface-accent, …) are preserved so
   surface scope classes keep working.

   Two-layer rule (see STYLE-GUIDE.md § 1.1):
   - Layer 1 (Master chrome, canonical): uses these tokens.
   - Layer 2 (Product accent, inline): product surfaces declare their own
     narrative vars (e.g. --kizuna-ink) inline on the surface — NOT here.

   Pairs with: chrome-v1.css. Tokens can be overridden surface-by-surface
   without rewriting the chrome layer.
   ============================================================================ */

:root {
  /* ---- Palette — Integral master (Advisory anchor, expanded per Kizuna) -- */
  --navy:          #1E3A5F;  /* Primary — headings, CTAs, branded surfaces */
  --navy-dark:     #142B47;  /* CTA hover, over-colour emphasis */
  --navy-deep:     #0E223D;  /* Deepest shade — dark-mode backgrounds */

  --gold:          #B08D4E;  /* Accent — rules, labels, wordmark highlight */
  --gold-bright:   #C9A569;  /* On-navy gold (brighter for contrast) */
  --gold-light:    #D4B580;  /* Small labels on navy backgrounds */
  --gold-soft:     #F4EDDD;  /* Gold-tinted paper, callout backgrounds */

  --ink:           #0F172A;  /* Body copy */
  --ink-soft:      #1E293B;  /* Secondary body / slightly softer ink */

  --slate:         #475569;  /* Secondary text (darker than v0 --color-slate) */
  --slate-light:   #64748B;  /* Tertiary text */
  --slate-lighter: #94A3B8;  /* Meta, page numbers, disabled */

  --rule:          #E2E8F0;  /* Hairline dividers — default */
  --rule-strong:   #CBD5E1;  /* Stronger dividers where needed */

  --paper:         #FFFFFF;  /* Page background */
  --cream:         #FCFAF6;  /* Warm neutral — launch notice, values bg */
  --card:          #F8FAFC;  /* Tier cards, quote blocks */

  /* ---- Semantic aliases (surfaces re-bind these; chrome targets them) ---- */
  --surface-bg:         var(--paper);
  --surface-fg:         var(--ink);
  --surface-muted:      var(--slate);
  --surface-card:       var(--card);
  --surface-rule:       var(--rule);
  --surface-accent:     var(--gold);
  --surface-primary:    var(--navy);
  --surface-primary-hi: var(--navy-dark);

  /* ---- Type system ---------------------------------------------------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', 'Inter', Georgia, serif;  /* web display face (variable opsz 9..144) */
  --font-mono:    'JetBrains Mono', Menlo, Consolas, monospace;

  /* Scale — 8-step, aligns with Advisory + Kizuna */
  --fs-xs:   12px;   /* uppercase labels, captions */
  --fs-sm:   14px;   /* meta, small body, nav links */
  --fs-base: 17px;   /* body default (Advisory + Kizuna) */
  --fs-md:   20px;   /* lede, section intro */
  --fs-lg:   22px;   /* h3 */
  --fs-xl:   32px;   /* section h2 (Advisory) */
  --fs-2xl:  40px;   /* section h2 (Kizuna, looser rhythm) */
  --fs-3xl:  52px;   /* page hero (Advisory) */
  --fs-4xl:  64px;   /* page hero (Kizuna) */

  --lh-tight:  1.05;
  --lh-snug:   1.15;
  --lh-normal: 1.3;
  --lh-body:   1.6;

  --track-tight:   -0.02em;
  --track-snug:    -0.015em;
  --track-normal:  0;
  --track-label:   0.18em;   /* uppercase labels */
  --track-display: 0.22em;   /* hero kicker, small caps */

  /* ---- Spacing — 4px base, shared umbrella-wide ----------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---- Radius — Advisory rectilinear default -------------------------- */
  --radius-sharp: 2px;   /* Advisory, Kizuna cards (rectilinear) */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-full:  9999px;
  --radius-card:  var(--radius-sharp);

  /* ---- Shadow — flat+hairline default ---------------------------------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 8px 24px rgba(15, 23, 42, 0.12);

  /* ---- Layout --------------------------------------------------------- */
  --max:          1120px;   /* wide / nav container */
  --max-narrow:   760px;    /* inner-page body / long-form prose */
  --max-content:  720px;    /* Advisory copy column */

  /* Nav height (pairs with main padding-top in chrome-v1.css) */
  --nav-h: 68px;
}

/* ============================================================================
   Surface scope classes
   Apply on a container (e.g. <section class="surface-shok27go">) to rebind
   tokens for that product surface. Scoped surface only overrides what
   legitimately diverges. Layout tokens (spacing, type scale, max-widths)
   are shared umbrella-wide — do not override.
   ============================================================================ */

.surface-advisory {
  --surface-bg:         var(--paper);
  --surface-fg:         var(--ink);
  --surface-muted:      var(--slate);
  --surface-card:       var(--card);
  --surface-rule:       var(--rule);
  --surface-accent:     var(--gold);
  --surface-primary:    var(--navy);
  --surface-primary-hi: var(--navy-dark);
  --radius-card:        var(--radius-sharp);
}

.surface-shok27go {
  --surface-bg:         #040810;
  --surface-fg:         rgba(245, 242, 235, 0.92);
  --surface-muted:      rgba(245, 242, 235, 0.60);
  --surface-card:       #0B2647;
  --surface-rule:       rgba(245, 242, 235, 0.08);
  --surface-accent:     #C9A86C;
  --surface-primary:    #C9A86C;
  --surface-primary-hi: #B08D57;
  --font-sans:          'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:       'Cormorant Garamond', Georgia, serif;
  --radius-card:        var(--radius-xl);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.40);
}

.surface-tobira {
  --surface-bg:         #040810;
  --surface-fg:         rgba(245, 242, 235, 0.92);
  --surface-muted:      rgba(245, 242, 235, 0.60);
  --surface-card:       #0B2647;
  --surface-rule:       rgba(245, 242, 235, 0.08);
  --surface-accent:     #C9A86C;
  --surface-primary:    #C9A86C;
  --surface-primary-hi: #B08D57;
  --font-sans:          'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:       var(--font-sans);
  --radius-card:        var(--radius-xl);
}

.surface-kizuna {
  /* Kizuna uses the master Integral palette on paper (not a dark shell).
     Narrative accents (--kizuna-ink, Noto Serif JP kanji) are Layer 2 —
     declared inline on the Kizuna surface, NOT here. */
  --surface-bg:         var(--paper);
  --surface-fg:         var(--ink);
  --surface-muted:      var(--slate);
  --surface-card:       var(--paper);
  --surface-rule:       var(--rule);
  --surface-accent:     var(--gold);
  --surface-primary:    var(--navy);
  --surface-primary-hi: var(--navy-dark);
  --radius-card:        var(--radius-sharp);
}

/* ============================================================================
   Responsive token step-downs
   ============================================================================ */

@media (max-width: 900px) {
  :root {
    --fs-4xl: 44px;
    --fs-3xl: 34px;
    --fs-2xl: 30px;
    --fs-xl:  26px;
    --fs-md:  18px;
  }
}

@media (max-width: 520px) {
  :root {
    --fs-4xl: 34px;
    --fs-3xl: 28px;
    --fs-2xl: 26px;
    --fs-xl:  22px;
    --fs-base: 16px;
  }
}