/*
 * tokens.css — shared design tokens (fonts + :root custom properties).
 * Mirrors the @font-face + :root block in css/style.css so the standalone
 * /mask/<id> page uses the exact same tokens as the rest of the site
 * (and therefore matches the gallery modal). Keep in sync with style.css.
 */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-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;
}
/* Display — Clash Display (replaces Clash Display). Variable 200–700, no
   italic face; faux italic/bold disabled via `font-synthesis: none` on body. */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../assets/fonts/clash-display-latin.woff2') format('woff2');
}
/* Body / UI — Geist (replaces Geist). Variable 100–900. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/geist-latin.woff2') format('woff2');
}

:root {
  /* ── Font stacks ──────────────────────────────── */
  --font-display: 'Clash Display', serif;
  --font-ui:   'Geist', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Brand palette ────────────────────────────── */
  --gold:    #F5A31A;
  --gold-dim:   rgba(245,163,26,0.5);  /* borders, dim accents */
  --gold-faint: rgba(245,163,26,0.18); /* subtle backgrounds */
  --gold-line:  rgba(245,163,26,0.08); /* hairline tints */
  --teal:    #3DAAB5;       /* cool secondary — live/on-chain indicators + data viz ONLY */
  --teal-dim:   rgba(61,170,181,0.5);
  --oxblood:        #350D0D; /* featured-panel ground — earned moments, art-historical gravitas */
  --oxblood-accent: #6B1A1A; /* oxblood that must READ as a rule/label — never text on dark (AA 1.5:1) */
  --gold-link:      #CF9224; /* deep-gold for links — keeps bright --gold as one-hit punctuation (AA 6.4–7.6:1) */
  --bg:      #060504;
  --bg2:     #0C0A08;
  --bg3:     #161412;       /* skeleton mid + warm dark */
  --bg-warm: #1a1205;       /* ticker tag warm dark */
  --off:     #F0EBE1;
  --off-70:  rgba(240,235,225,0.70);
  --off-50:  rgba(240,235,225,0.60);
  --dim:     rgba(240,235,225,0.55);
  --faint:   rgba(240,235,225,0.18);  /* borders only — fails AA for text */
  --line:    rgba(240,235,225,0.08);
  --line-strong: rgba(240,235,225,0.12); /* scrollbar thumbs */

  /* ── Semantic ─────────────────────────────────── */
  --success: #4ade80;
  --danger:  #f87171;

  /* ── Brand exceptions (never use for site UI) ─── */
  --brand-uniswap: #F50DB4;      /* brand exception — never use for site UI */
  --brand-discord: #5865F2;      /* brand exception — never use for site UI */
  --brand-discord-dim: #7289da;  /* brand exception — never use for site UI */

  /* ── Type scale ───────────────────────────────── */
  --fs-display: clamp(72px, 9vw, 120px);
  --fs-title:   clamp(40px, 5vw, 64px);
  --fs-section: clamp(36px, 4.5vw, 56px);
  --fs-h3:      clamp(20px, 1.9vw, 26px);
  --fs-heading: clamp(15px, 1.2vw, 17px);
  --fs-card-name: 18px;       /* gallery + vitrine mask name (Playfair italic) */
  --fs-body:    16px;
  --fs-body-sm: 15px;
  --fs-button:  13px;
  --fs-label:   12px;
  --fs-meta:    12px;         /* raised from 11px — min readable size */
  --fs-mono:    12px;

  /* ── Letter-spacing scale ─────────────────────── */
  --track-tight:   0.04em;
  --track-default: 0.12em;
  --track-wide:    0.18em;
  --track-display: 0.22em;

  /* ── Spacing (4px base) ───────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ── Radius ───────────────────────────────────── */
  --r-sharp:  0px;
  --r-sm:     2px;
  --r-md:     4px;
  --r-lg:     8px;
  --r-pill:   999px;
  --r-circle: 50%;

  /* ── Motion ───────────────────────────────────── */
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;
  --t-slower: 600ms;
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: ease;

  /* ── Z-index ──────────────────────────────────── */
  --z-base:  1;
  --z-sticky: 10;
  --z-nav:   500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-grain: 9999;

  /* ── Layout ───────────────────────────────────── */
  /* Section rhythm scale — deliberate cadence by role, not uniform spacing.
     loose = statement sections (About, Anthem); default = medium (NCT, token);
     tight = dense sections whose content already fills them (Gallery, Live). */
  --section-gap-tight: clamp(48px, 4.5vw, 68px);
  --section-gap:       clamp(56px, 6vw, 88px);
  --section-gap-loose: clamp(72px, 8vw, 112px);

  /* ── Breakpoints (reference only) ────────────── */
  --bp-sm: 540px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}