/*
 * ═══════════════════════════════════════════════════════════════
 * 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
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── 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'); }


/* =================================================================
   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 ──────────────────────────────────────────── */
  --font-primary:         'Jost', sans-serif;
  --font-display:         'GT Sectra Display', serif;
  --font-korean:          'Noto Serif KR', serif;
  --font-mono:            'Space Mono', monospace;
  --font-mono-prop:       'Space Grotesk', sans-serif;  /* Proportional variant — legacy compat */
  --font-korean-sans:     'Pretendard Variable', 'Pretendard', sans-serif;

  /* ── 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;
}