/* ==========================================================================
   rs9 — Design System Tokens
   Theme: "The Obsidian Vault" — Ruby Red · Champagne Gold · Obsidian Black
   ========================================================================== */

/* ---------- Self-hosted fonts (WOFF2, latin subset) ---------- */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-var-latin.woff2') format('woff2-variations'),
       url('../fonts/sora-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations'),
       url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Surfaces: obsidian black family ---------- */
  --c-void:           #05060A;   /* page floor — deepest obsidian */
  --c-obsidian:       #07080D;   /* base background */
  --c-onyx:           #0D0F16;   /* cards / panels */
  --c-graphite:       #14171F;   /* elevated cards, modals, inputs */
  --c-slate:          #1D212C;   /* hover surface, dividers */

  /* ---------- Ruby red: primary action colour ---------- */
  --c-ruby:           #E01A3C;
  --c-ruby-bright:    #FF3355;
  --c-ruby-deep:      #8E0B22;
  --c-ruby-ink:       #47060F;

  /* ---------- Champagne gold: luxury accent ---------- */
  --c-gold:           #E7C77A;
  --c-gold-bright:    #F8E7BC;
  --c-gold-deep:      #B08D3C;
  --c-gold-ink:       #3A2E10;

  /* ---------- Type ---------- */
  --c-text:           #F6F2EA;   /* 18.4:1 on obsidian */
  --c-text-soft:      #D6D0C6;   /* 13.1:1 */
  --c-text-muted:     #A79F92;   /* 7.4:1  — AA for normal text */
  --c-text-faint:     #8B8474;   /* 5.2:1  — AA for normal text, incl. on panels */
  --c-text-on-ruby:   #FFF6F7;   /* 4.9:1 on --c-ruby — AA */
  --c-text-on-gold:   #16110A;   /* 12.9:1 on --c-gold — AAA */

  /* ---------- Alpha helpers ---------- */
  --a-gold-hair:      rgba(231, 199, 122, 0.18);
  --a-gold-line:      rgba(231, 199, 122, 0.34);
  --a-gold-wash:      rgba(231, 199, 122, 0.06);
  --a-ruby-hair:      rgba(224, 26, 60, 0.24);
  --a-ruby-line:      rgba(224, 26, 60, 0.48);
  --a-ruby-wash:      rgba(224, 26, 60, 0.08);
  --a-white-hair:     rgba(246, 242, 234, 0.08);
  --a-black-veil:     rgba(5, 6, 10, 0.72);

  /* ---------- Gradients ---------- */
  --g-ruby:      linear-gradient(135deg, #FF3355 0%, #E01A3C 44%, #A20E2A 100%);
  --g-ruby-soft: linear-gradient(135deg, rgba(255, 51, 85, .16), rgba(142, 11, 34, .08));
  --g-gold:      linear-gradient(135deg, #F8E7BC 0%, #E7C77A 38%, #B08D3C 100%);
  --g-gold-text: linear-gradient(100deg, #B08D3C 0%, #F8E7BC 28%, #E7C77A 52%, #F8E7BC 74%, #B08D3C 100%);
  --g-panel:     linear-gradient(160deg, rgba(29, 33, 44, .82) 0%, rgba(13, 15, 22, .94) 62%);
  --g-panel-lift:linear-gradient(160deg, rgba(38, 43, 58, .9) 0%, rgba(16, 19, 27, .96) 62%);
  --g-hairline:  linear-gradient(90deg, transparent, var(--a-gold-line) 22%, var(--c-gold) 50%, var(--a-gold-line) 78%, transparent);

  /* ---------- Shadows & glows ---------- */
  --sh-xs:        0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm:        0 6px 18px rgba(0, 0, 0, .45);
  --sh-md:        0 16px 40px rgba(0, 0, 0, .55);
  --sh-lg:        0 32px 80px rgba(0, 0, 0, .65);
  --glow-ruby-sm: 0 0 0 1px var(--a-ruby-line), 0 8px 26px rgba(224, 26, 60, .28);
  --glow-ruby-lg: 0 0 0 1px var(--a-ruby-line), 0 18px 60px rgba(224, 26, 60, .42);
  --glow-gold-sm: 0 0 0 1px var(--a-gold-line), 0 8px 26px rgba(231, 199, 122, .22);
  --glow-gold-lg: 0 0 0 1px var(--a-gold-line), 0 18px 56px rgba(231, 199, 122, .3);

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---------- Typography ---------- */
  --f-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.4rem, 1.35rem + 4.4vw, 4.6rem);
  --fs-h1:      clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2:      clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem);
  --fs-h3:      clamp(1.24rem, 1.05rem + 0.8vw, 1.65rem);
  --fs-h4:      clamp(1.06rem, 0.98rem + 0.4vw, 1.24rem);
  --fs-lead:    clamp(1.02rem, 0.96rem + 0.36vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.925rem;
  --fs-xs:      0.815rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.32;
  --lh-body: 1.78;

  /* ---------- Spacing scale ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 44px;  --s-8: 60px;
  --s-9: 84px;  --s-10: 112px;

  --section-y: clamp(60px, 7vw, 118px);

  /* ---------- Layout ---------- */
  --wrap-max: 1240px;
  --wrap-wide: 1420px;
  --wrap-text: 76ch;
  /* Generous, symmetrical side gutters — deliberate breathing room L/R */
  --gutter: clamp(20px, 5.2vw, 64px);
  --nav-h: 74px;
  --nav-h-shrunk: 62px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, .9, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 620ms;

  /* ---------- Z-index ladder ---------- */
  --z-base: 1;
  --z-raise: 10;
  --z-sticky: 100;
  --z-nav: 500;
  --z-drawer: 700;
  --z-overlay: 900;
  --z-toast: 1000;
}

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