/*
 * ═══════════════════════════════════════════════════════════════
 * SAINT CLAIR — DESIGN TOKENS
 * ═══════════════════════════════════════════════════════════════
 *
 * Version:   5.0
 * Date:      17 February 2026
 * Author:    Diane — Creative Director, Saint Clair Pte. Ltd.
 * Source:    Brand Book v5.0 Refonte
 *
 * Purpose:   Single source of truth for all Saint Clair design
 *            tokens. Every stylesheet — documents, slides, web —
 *            imports this file. Change once, cascade everywhere.
 *
 * Hierarchy: Layer 0 (Foundation)
 *            └─ Imported by: saint-clair-base.css (Layer 1)
 *               ├─ saint-clair-docs.css   (Layer 2a — Print)
 *               ├─ saint-clair-slides.css (Layer 2b — Decks)
 *               └─ saint-clair-web.css    (Layer 2c — Website)
 *
 * ═══════════════════════════════════════════════════════════════
 */


/* =================================================================
   FONTS
   ================================================================= */

/* ── Local-only Latin fonts — self-hosted, no CDN (7 Jun 2026) ──
   Was Google Fonts @import; now self-hosted woff2 under ../fonts/ so the
   site renders identically offline and matches the document estate. ── */

/* ── Jost — primary sans ── */
@font-face { font-family: 'Jost'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/jost/Jost-Light.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 300; font-style: italic; font-display: swap; src: url('../fonts/jost/Jost-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/jost/Jost-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/jost/Jost-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/jost/Jost-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: italic; font-display: swap; src: url('../fonts/jost/Jost-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/jost/Jost-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/jost/Jost-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-style: italic; font-display: swap; src: url('../fonts/jost/Jost-BoldItalic.woff2') format('woff2'); }

/* ── Space Mono — monospace ── */
@font-face { font-family: 'Space Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/space-mono/SpaceMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/space-mono/SpaceMono-Bold.woff2') format('woff2'); }

/* ── Space Grotesk — proportional mono (legacy) ── */
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/space-grotesk/SpaceGrotesk-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/space-grotesk/SpaceGrotesk-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/space-grotesk/SpaceGrotesk-Bold.woff2') format('woff2'); }

/* Korean faces are self-hosted below (@font-face), not imported.
   Retired 7 Jun 2026: Noto Serif KR (was --font-korean) and Pretendard
   (was --font-korean-sans). Canonical Korean = KoPub (Batang serif +
   Dotum sans) for text; Black Han Sans for monumental display. */

/* ── GT Sectra Display — v5.0 display serif (replaces Cormorant Garamond) ── */
@font-face { font-family: 'GT Sectra Display'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Light.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 300; font-style: italic; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Light-Italic.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Regular.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Regular-Italic.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Medium.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 500; font-style: italic; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Medium-Italic.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Bold.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 700; font-style: italic; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Bold-Italic.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 900; font-style: normal; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Super.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra Display'; font-weight: 900; font-style: italic; font-display: swap; src: url('../fonts/gt-sectra/GT-Sectra-Display-Super-Italic.woff2') format('woff2'); }

/* ── KoPub — v6 canonical Korean text family (replaces Noto Serif KR + Pretendard, 7 Jun 2026) ── */
/* KoPub Batang — Korean editorial serif (pairs with GT Sectra) */
@font-face { font-family: 'KoPub Batang'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/kopub/KoPubBatang-Light.woff2') format('woff2'); }
@font-face { font-family: 'KoPub Batang'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/kopub/KoPubBatang-Medium.woff2') format('woff2'); }
@font-face { font-family: 'KoPub Batang'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/kopub/KoPubBatang-Bold.woff2') format('woff2'); }
/* KoPub Dotum — Korean body / UI sans (pairs with Jost) */
@font-face { font-family: 'KoPub Dotum'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/kopub/KoPubDotum-Light.woff2') format('woff2'); }
@font-face { font-family: 'KoPub Dotum'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/kopub/KoPubDotum-Bold.woff2') format('woff2'); }

/* ── Black Han Sans — monumental Korean display (KR nameplate heroes only; OFL) ── */
@font-face { font-family: 'Black Han Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/black-han-sans/BlackHanSans-Regular.woff2') format('woff2'); }


/* =================================================================
   DESIGN TOKENS
   ================================================================= */

:root {

  /* ── Primary Palette ─────────────────────────────────────── */
  --sc-violet:            #1A1445;
  --sc-gold:              #CAAA63;
  --sc-cream:             #FAF9F5;

  /* ── Violet Scale ────────────────────────────────────────── */
  --sc-deep-violet:       #110E30;   /* v5.0: normalised from #100E30 */
  --sc-surface-violet:    #241C58;
  --sc-mid-violet:        #32286A;
  --sc-muted-violet:      #4A4580;
  --sc-violet-grey:       #5A5670;
  --sc-muted:             #8A8698;   /* v5.0: plate-labels, secondary text */
  --sc-lavender:          #B0ADC0;   /* Soft violet — bridge between violet and cream */

  /* ── Neutrals ────────────────────────────────────────────── */
  --sc-charcoal:          #141413;
  --sc-dark-grey:         #30302E;
  --sc-divider:           #E8E6E2;
  --sc-white:             #FFFFFF;

  /* ── Functional ──────────────────────────────────────────── */
  --sc-success:           #27AE60;
  --sc-error:             #E74C3C;
  --sc-input-blue:        #2E5090;
  --sc-placeholder-bg:    #FFF3CD;
  --sc-placeholder-txt:   #856404;

  /* ── Gold at opacity ─────────────────────────────────────── */
  --sc-gold-10:           rgba(202, 170, 99, 0.10);
  --sc-gold-15:           rgba(202, 170, 99, 0.15);
  --sc-gold-30:           rgba(202, 170, 99, 0.30);
  --sc-gold-50:           rgba(202, 170, 99, 0.50);

  /* ── Violet at opacity ───────────────────────────────────── */
  --sc-violet-10:         rgba(26, 20, 69, 0.10);
  --sc-violet-50:         rgba(26, 20, 69, 0.50);

  /* ── Deck-Specific (Dark Theme — Corporate Violet) ───────── */
  --sc-deck-bg:           #1A1445;
  --sc-deck-surface:      #241C58;
  --sc-deck-surface-alt:  #32286A;

  /* ── Legacy Deep Violet (deck-suite backward compat) ────── */
  --sc-deep-violet-bg:    #110E30;   /* v5.0: aligned with --sc-deep-violet */
  --sc-deck-text:         #FAF9F5;
  --sc-deck-text-muted:   #8B8AA3;
  --sc-deck-text-dim:     #5A5878;
  --sc-deck-border:       #3A3268;

  /* ── Deck-Specific (Light Theme) ─────────────────────────── */
  --sc-deck-light-bg:        #FAF9F5;
  --sc-deck-light-surface:   #FFFFFF;
  --sc-deck-light-surface-alt: #F2F0EC;
  --sc-deck-light-text:      #1A1445;
  --sc-deck-light-text-muted: #6B6680;
  --sc-deck-light-text-dim:  #9B97A8;
  --sc-deck-light-border:    #E8E6E2;

  /* ── Country Accent Colours ────────────────────────────── */
  --sc-country-sri-lanka:  #1A8B6E;
  --sc-country-indonesia:  #B85C38;
  --sc-country-mongolia:   #3B7CB5;

  /* ── Typography ──────────────────────────────────────────── */
  /* Latin faces carry a KoPub Korean fallback: Hangul in any Latin
     context falls through to KoPub automatically (Batang in serif/display
     contexts, Dotum in sans/mono), while Latin keeps its primary face. */
  --font-primary:         'Jost', 'KoPub Dotum', sans-serif;
  --font-display:         'GT Sectra Display', 'KoPub Batang', serif;
  --font-mono:            'Space Mono', 'KoPub Dotum', monospace;
  --font-mono-prop:       'Space Grotesk', 'KoPub Dotum', sans-serif;  /* Proportional variant — legacy compat */
  /* Korean — canonical v6 (KoPub for text, Black Han Sans for monumental display) */
  --font-korean:          'KoPub Batang', 'GT Sectra Display', serif;   /* Korean editorial serif; Latin glyphs KoPub lacks → GT Sectra */
  --font-korean-sans:     'KoPub Dotum', 'Jost', sans-serif;            /* Korean body / UI sans; Latin glyphs KoPub lacks → Jost */
  --font-korean-display:  'Black Han Sans', sans-serif; /* Korean monumental display — nameplate heroes only */

  /* ── Font Weights ────────────────────────────────────────── */
  --weight-thin:          100;
  --weight-light:         300;
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* ── Spacing Scale ───────────────────────────────────────── */
  --space-2:              2px;
  --space-4:              4px;
  --space-6:              6px;
  --space-8:              8px;
  --space-10:             10px;
  --space-12:             12px;
  --space-14:             14px;
  --space-16:             16px;
  --space-18:             18px;
  --space-20:             20px;
  --space-24:             24px;
  --space-32:             32px;
  --space-40:             40px;
  --space-48:             48px;
  --space-64:             64px;
  --space-80:             80px;

  /* ── Vertical Rhythm ─────────────────────────────────────── */
  --section-gap:          18px;
  --element-gap:          8px;

  /* ── Brand Elements ──────────────────────────────────────── */
  --gold-rule-width:      40px;   /* v5.0: 40px (studies), 48px (docs — override in docs.css) */
  --gold-rule-height:     3px;    /* v5.0: 3px (studies), 1.5px (docs — override in docs.css) */

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:            2px;
  --radius-md:            4px;
  --radius-lg:            8px;

  /* ── Letter Spacing Scale ────────────────────────────────── */
  --tracking-tight:       -0.02em;
  --tracking-snug:        -0.01em;  /* v5.0: h1 in studies */
  --tracking-normal:      0;
  --tracking-wide:        0.06em;
  --tracking-wider:       0.12em;
  --tracking-labels:      0.15em;   /* v5.0: plate-labels */
  --tracking-titles:      0.2em;    /* v5.0: plate-titles, study-labels */
  --tracking-widest:      0.22em;

  /* ── Study-Specific (v5.0 Brand Études) ────────────────── */
  --study-bg:             #E8E6E2;  /* Body background for brand studies */
  --study-body-padding:   40px;
  --plate-bg:             var(--sc-cream);
  --plate-padding:        48px;
  --plate-margin:         32px;
  --plate-radius:         2px;
}