/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · DESIGN TOKENS
   Source: sacred_studios_brand_system_audit.md + presentation.thesacredstudios.com
   System: A · Dark / Marketing
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BACKGROUNDS ────────────────────────────────────────────────────────── */
  --bg-deep:          #050814;   /* atmospheric · hero only */
  --bg:               #0A0B10;   /* page bg · DEFAULT */
  --bg-card:          #14151A;   /* card surfaces */
  --bg-card-hi:       rgba(237, 231, 218, 0.04); /* elevated card */
  --bg-elev:          #1A1D24;
  --bg-elev-2:        #22252E;

  /* ─── CRIMSON FAMILY ─────────────────────────────────────────────────────── */
  --crimson:          #C41230;   /* primary brand red */
  --crimson-deep:     #8B0A20;   /* hover state */
  --crimson-bright:   #E63950;   /* highlight */
  --crimson-coral:    #CD364F;   /* softer · em italic emphasis · glows */
  --crimson-glow:     rgba(196, 18, 48, 0.35);
  --crimson-soft:     rgba(196, 18, 48, 0.10);
  --crimson-faint:    rgba(196, 18, 48, 0.03);

  /* ─── LINEN FAMILY (text on dark) ────────────────────────────────────────── */
  --linen:            #EDE7DA;   /* body text on dark · DEFAULT */
  --linen-mute:       #D8D1C0;
  --linen-soft:       #B8B2A6;
  --linen-faint:      rgba(237, 231, 218, 0.04);

  /* ─── LINES / BORDERS ────────────────────────────────────────────────────── */
  --line:             rgba(237, 231, 218, 0.08);
  --line2:            rgba(237, 231, 218, 0.16);
  --line3:            rgba(237, 231, 218, 0.24);

  /* ─── ACCENT (restrained · special-use only) ─────────────────────────────── */
  --gold:             #C8A158;   /* savings / success only */
  --good:             #6BB179;   /* live status indicators */

  /* ─── FONTS ──────────────────────────────────────────────────────────────── */
  --font-display:     'UnifrakturCook', Cinzel, 'Times New Roman', serif;
  --font:             'Montserrat', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif;
  --font-cond:        'Barlow Condensed', 'Montserrat', sans-serif;
  --font-body-alt:    'Barlow', 'Montserrat', sans-serif;

  /* ─── TYPE SCALE (per brand audit) ───────────────────────────────────────── */
  --h1-hero:          clamp(56px, 9vw, 132px);   /* MST demo scale */
  --h2-section:       clamp(40px, 6vw, 80px);
  --h3-card:          clamp(22px, 2.4vw, 32px);
  --body-lg:          17px;
  --body:             16px;
  --body-sm:          14px;
  --eyebrow:          11px;
  --mono:             11px;

  /* ─── SPACING (8px base) ─────────────────────────────────────────────────── */
  --s-1:              4px;
  --s-2:              8px;
  --s-3:              16px;
  --s-4:              24px;
  --s-5:              32px;
  --s-6:              48px;
  --s-7:              64px;
  --s-8:              80px;       /* section mobile */
  --s-9:              120px;      /* section desktop */
  --s-10:             160px;      /* hero / dramatic */

  /* ─── BORDER RADIUS ──────────────────────────────────────────────────────── */
  --r-sm:             8px;        /* buttons, small cards */
  --r:                10px;       /* default cards */
  --r-lg:             14px;       /* large cards, modal panels */
  --r-pill:           100px;      /* pills, badges */

  /* ─── SHADOW RECIPES (per audit) ─────────────────────────────────────────── */
  --shadow-glow:      rgba(205, 54, 79, 1) 0 0 10px 0;
  --shadow-card:
    rgba(196, 18, 48, 0.12) 0 0 0 1px,
    rgba(196, 18, 48, 0.12) 0 0 30px 0,
    rgba(237, 231, 218, 0.08) 0 1px 0 0 inset,
    rgba(0, 0, 0, 0.4) 0 20px 60px 0;
  --shadow-hero:
    rgba(237, 231, 218, 0.04) 0 0 0 1px,
    rgba(0, 0, 0, 0.8) 0 30px 80px 0,
    rgba(196, 18, 48, 0.1) 0 0 120px 0;

  /* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
  --content-w:        1200px;
  --content-w-wide:   1320px;     /* nav max-width */
  --nav-h:            78px;
  --scrollbar-w:      10px;

  /* ─── MOTION ─────────────────────────────────────────────────────────────── */
  --ease:             cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:           0.2s;
  --t:                0.3s;
  --t-slow:           1s;

  /* ─── Z-INDEX SCALE ──────────────────────────────────────────────────────── */
  --z-bg:             0;
  --z-stars:          1;
  --z-grain:          2;
  --z-content:        5;
  --z-nav:            80;
  --z-modal:          200;
  --z-fab:            90;
  --z-chat-fab:       2147483647; /* sage chat widget — top of stack */
}