/* ==========================================================================
   P77 Game — Design Tokens
   Theme: "Champagne Terrace" — light mode, ivory + champagne gold + burgundy
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  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: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin.woff2') format('woff2');
  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: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Base — light mode: warm ivory surfaces ---------- */
  --color-bg-base: #FBF6EC;
  --color-bg-tint: #F5EBDA;
  --color-surface-card: #FFFDF8;
  --color-surface-raised: #FFFFFF;
  --color-border-soft: #E7D9BE;
  --color-border-hair: #EFE3CD;

  /* ---------- Obsidian — text ink + the single dark contrast band ---------- */
  --color-obsidian-ink: #1A130D;
  --color-obsidian-contrast-bg: #120D09;
  --color-obsidian-raised: #1E1610;

  /* ---------- Burgundy — accent, used sparingly and formally ---------- */
  --color-burgundy-700: #5E0F19;
  --color-burgundy-600: #7A1420;
  --color-burgundy-500: #93202E;
  --color-burgundy-tint: rgba(122, 20, 32, 0.08);
  --color-burgundy-tint-strong: rgba(122, 20, 32, 0.16);

  /* ---------- Champagne Gold — foil trim, rim-light ---------- */
  --color-gold-deep: #A67C3C;
  --color-gold-foil: #C9A05C;
  --color-gold-bright: #E8CD92;
  --color-gold-tint: rgba(201, 160, 92, 0.12);
  --color-gold-tint-strong: rgba(201, 160, 92, 0.26);
  --color-gold-text: #7C5A24;         /* gold dark enough for small text on ivory */

  /* ---------- Text ---------- */
  --color-text-primary: #1A130D;
  --color-text-secondary: #5C4C3A;
  --color-text-muted: #6F6049;        /* darkened from #8A7A64 to clear WCAG AA on ivory */
  --color-text-on-dark: #F4ECDD;
  --color-text-on-dark-muted: #B9A98F;

  /* ---------- Functional ---------- */
  --color-success: #2E8C55;
  --color-warning: #B97A1E;
  --color-danger: #A6362E;

  /* ---------- Effects ---------- */
  --shadow-rim-gold: 0 0 0 1px var(--color-gold-foil),
    0 14px 30px -12px rgba(122, 20, 32, 0.18);
  --shadow-rim-hair: 0 0 0 1px var(--color-border-soft);
  --shadow-card: 0 8px 24px rgba(26, 19, 13, 0.08);
  --shadow-card-lift: 0 20px 44px -18px rgba(26, 19, 13, 0.24);
  --shadow-plaque: 0 30px 70px -30px rgba(18, 13, 9, 0.55);

  --gradient-foil: linear-gradient(
    115deg,
    #A67C3C 0%,
    #E8CD92 22%,
    #C9A05C 42%,
    #FBF0D6 58%,
    #C9A05C 74%,
    #A67C3C 100%
  );
  --gradient-burgundy: linear-gradient(135deg, #93202E 0%, #7A1420 55%, #5E0F19 100%);
  --gradient-ink: linear-gradient(160deg, #1E1610 0%, #120D09 60%, #0C0806 100%);
  /* Telegram blue, deepened so white label text clears WCAG AA */
  --gradient-telegram: linear-gradient(140deg, #1A7AA6 0%, #156489 55%, #10506E 100%);

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* ---------- Type scale (fluid) ---------- */
  --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --fs-hero: clamp(2.15rem, 1.45rem + 2.9vw, 3.6rem);
  --fs-h1: clamp(2rem, 1.3rem + 3.1vw, 3.5rem);
  --fs-h2: clamp(1.65rem, 1.15rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  --fs-h4: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.4vw, 1.22rem);
  --fs-body: clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
  --fs-sm: 0.9rem;
  --fs-xs: 0.795rem;
  --fs-numeral: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.72;

  --tracking-eyebrow: 0.22em;
  --tracking-wide: 0.06em;

  /* ---------- Spacing ---------- */
  --space-2xs: 0.35rem;
  --space-xs: 0.6rem;
  --space-sm: 1rem;
  --space-md: 1.6rem;
  --space-lg: 2.6rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --section-pad-y: clamp(3.6rem, 2.2rem + 5.4vw, 7.5rem);

  /* ---------- Layout ---------- */
  --shell-max: 1240px;
  --shell-max-wide: 1420px;
  --shell-gutter: clamp(1.25rem, 0.4rem + 3.6vw, 4.5rem);
  --nav-h: 74px;

  /* ---------- Motion ---------- */
  --ease-terrace: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-ribbon: cubic-bezier(0.16, 0.84, 0.44, 1);
  --dur-fast: 180ms;
  --dur-med: 380ms;
  --dur-slow: 720ms;
  --dur-reveal: 900ms;

  /* ---------- Z-index ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-sticky: 60;
  --z-nav: 80;
  --z-overlay: 90;
  --z-modal: 100;
}

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