/* ==========================================================================
   101F Game — Design Tokens  ·  "The Emerald Vault"
   Obsidian · Cut-Emerald · Vault Gold
   ========================================================================== */

/* ---------- Self-hosted typefaces ---------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations'),
       url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2') format('woff2-variations'),
       url('../fonts/manrope-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/spacemono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/spacemono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Core palette ---------------------------------------------- */
  --color-bg:            #070B09;
  --color-bg-deep:       #040705;
  --color-surface:       #0E241B;
  --color-surface-2:     #0A1A14;
  --color-surface-3:     #122E23;
  --color-emerald:       #17B978;
  --color-emerald-deep:  #0B5E3D;
  --color-emerald-dim:   #0A3D2A;
  --color-gold:          #D4AF37;
  --color-gold-bright:   #F2C879;
  --color-gold-deep:     #8A6D1E;
  --color-text:          #EDEDE4;
  --color-text-muted:    #9FB6AA;
  --color-text-faint:    #6E8479;
  --color-danger:        #E4674B;

  /* ---------- Alpha derivatives ----------------------------------------- */
  --gold-a08:  rgba(212, 175, 55, 0.08);
  --gold-a14:  rgba(212, 175, 55, 0.14);
  --gold-a24:  rgba(212, 175, 55, 0.24);
  --gold-a40:  rgba(212, 175, 55, 0.40);
  --em-a08:    rgba(23, 185, 120, 0.08);
  --em-a14:    rgba(23, 185, 120, 0.14);
  --em-a24:    rgba(23, 185, 120, 0.24);
  --em-a45:    rgba(23, 185, 120, 0.45);
  --ivory-a06: rgba(237, 237, 228, 0.06);
  --ivory-a10: rgba(237, 237, 228, 0.10);
  --ivory-a16: rgba(237, 237, 228, 0.16);

  /* ---------- Typography ------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Space Mono', 'Segoe UI', 'Roboto Mono', ui-monospace, 'Courier New', monospace;

  --fs-display:  clamp(2.4rem, 1.35rem + 4.6vw, 4.7rem);
  --fs-h1:       clamp(2.05rem, 1.35rem + 3.1vw, 3.55rem);
  --fs-h2:       clamp(1.65rem, 1.22rem + 1.9vw, 2.65rem);
  --fs-h3:       clamp(1.22rem, 1.06rem + 0.7vw, 1.6rem);
  --fs-h4:       clamp(1.04rem, 0.98rem + 0.3vw, 1.2rem);
  --fs-lead:     clamp(1.02rem, 0.96rem + 0.32vw, 1.2rem);
  --fs-body:     clamp(0.955rem, 0.93rem + 0.14vw, 1.035rem);
  --fs-small:    0.875rem;
  --fs-micro:    0.75rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.78;
  --lh-loose: 1.9;

  --ls-eyebrow: 0.22em;
  --ls-tight:  -0.02em;

  /* ---------- Layout ------------------------------------------------------ */
  --container:      1200px;
  --container-wide: 1400px;
  --container-read: 780px;
  --gutter:  clamp(1.15rem, 0.55rem + 3vw, 3.25rem);
  --gutter-lg: clamp(1.15rem, 0.2rem + 4.6vw, 5rem);

  --section-y:    clamp(3.6rem, 2.2rem + 5.4vw, 7.5rem);
  --section-y-sm: clamp(2.6rem, 1.8rem + 3.4vw, 4.75rem);
  --block-gap:    clamp(1.6rem, 1.1rem + 2vw, 2.75rem);

  /* ---------- Shape ------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
  --facet: 18px;            /* corner cut for faceted vault cards */
  --facet-sm: 11px;
  --hairline: 1px solid var(--ivory-a10);
  --hairline-gold: 1px solid var(--gold-a24);

  /* ---------- Elevation --------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 38px -12px rgba(0, 0, 0, 0.72);
  --shadow-lg: 0 34px 80px -26px rgba(0, 0, 0, 0.88);
  --glow-emerald: 0 0 0 1px var(--em-a24), 0 18px 54px -20px rgba(23, 185, 120, 0.5);
  --glow-gold:    0 0 0 1px var(--gold-a40), 0 20px 60px -22px rgba(212, 175, 55, 0.45);

  /* ---------- Motion ------------------------------------------------------ */
  --ease-vault:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 180ms;
  --t-mid:  340ms;
  --t-slow: 680ms;

  /* ---------- Chrome ------------------------------------------------------ */
  --nav-h: 68px;
  --z-nav: 200;
  --z-drawer: 300;
  --z-top: 400;

  color-scheme: dark;
}

@media (min-width: 1200px) {
  :root { --nav-h: 80px; }
}