/* ============================================================
   FANCOINS — Colors & Type
   Single source of truth for tokens.
   ============================================================ */

/* ---------- Fonts (Google Fonts CDN) ----------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */

  /* Gold scale — the brand color. Used for accents, the coin glyph,
     primary CTAs on dark, and value indicators. Use sparingly on
     light surfaces to avoid washing out. */
  --gold-50:  #FBF3DD;
  --gold-100: #F6E6B0;
  --gold-200: #F0D27A;
  --gold-300: #E8BE4D;
  --gold-400: #D9A933;   /* hover on primary */
  --gold-500: #C99327;   /* primary gold (text/border on dark) */
  --gold-600: #A87618;
  --gold-700: #7E5710;
  --gold-800: #553A0B;
  --gold-900: #2E1F06;

  /* Ink scale — deep navy-blacks for the "powered by sport" feel.
     Ink-900 is near-black with a hint of blue, used for primary
     dark surface backgrounds. */
  --ink-50:   #F4F5F8;
  --ink-100:  #E5E7EE;
  --ink-200:  #C7CCD9;
  --ink-300:  #9097A8;
  --ink-400:  #5C6478;
  --ink-500:  #3C4255;
  --ink-600:  #252A3A;
  --ink-700:  #161A26;
  --ink-800:  #0F1320;
  --ink-900:  #0A0D17;   /* primary dark surface */
  --ink-950:  #05070D;

  /* Cream / warm neutrals — used as the "light" alternate surface.
     Slightly warmer than pure white so it sits closer to the gold. */
  --cream-50:  #FBFAF6;   /* primary light surface */
  --cream-100: #F4F1E8;
  --cream-200: #E8E2CD;

  /* Semantic — calibrated to read clearly on both ink-900 and cream-50. */
  --green-500: #2BA864;   /* win / positive delta */
  --green-100: #DBF3E5;
  --red-500:   #E14B4B;   /* loss / destructive */
  --red-100:   #FBDDDD;
  --blue-500:  #3B82F6;   /* info / link */
  --blue-100:  #DBE9FE;
  --amber-500: #F5A524;   /* warning */
  --amber-100: #FDECCB;

  /* ============================================================
     COLORS — Semantic (use these in product code)
     Defaults assume DARK theme (the primary Fancoins surface).
     ============================================================ */
  --bg:            var(--ink-900);
  --bg-raised:     var(--ink-800);
  --bg-sunken:     var(--ink-950);
  --bg-overlay:    rgba(10, 13, 23, 0.72);

  --surface:       var(--ink-800);
  --surface-2:     var(--ink-700);
  --surface-3:     var(--ink-600);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-gold:   rgba(232, 190, 77, 0.32);

  --fg:            #F4F5F8;        /* primary text */
  --fg-muted:      #9097A8;        /* secondary text */
  --fg-faint:      #5C6478;        /* tertiary / metadata */
  --fg-on-gold:    var(--ink-900); /* text on gold buttons */

  --accent:        var(--gold-300);
  --accent-strong: var(--gold-400);
  --accent-soft:   rgba(232, 190, 77, 0.12);

  --positive:      var(--green-500);
  --negative:      var(--red-500);
  --info:          var(--blue-500);
  --warning:       var(--amber-500);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-numeric: 'Sora', 'Inter', system-ui, sans-serif; /* tabular-num applied */

  /* ============================================================
     TYPE — Scale (1.25 modular, body anchored at 16)
     ============================================================ */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.5;
  --leading-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;   /* eyebrow / overline labels */

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

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* ============================================================
     SHADOWS — subtle on dark; cast warm gold on hover.
     ============================================================ */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow:  0 0 0 1px rgba(232, 190, 77, 0.24), 0 8px 32px rgba(232, 190, 77, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:   1200px;
  --container-narrow: 880px;
  --header-h:    64px;
}

/* ============================================================
   LIGHT THEME — opt-in via [data-theme="light"]
   ============================================================ */
[data-theme="light"] {
  --bg:            var(--cream-50);
  --bg-raised:     #FFFFFF;
  --bg-sunken:     var(--cream-100);
  --bg-overlay:    rgba(11, 15, 26, 0.4);

  --surface:       #FFFFFF;
  --surface-2:     var(--cream-50);
  --surface-3:     var(--cream-100);

  --border:        rgba(11, 15, 26, 0.08);
  --border-strong: rgba(11, 15, 26, 0.16);

  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-faint:      var(--ink-400);

  --accent:        var(--gold-500);
  --accent-strong: var(--gold-600);
  --accent-soft:   rgba(201, 147, 39, 0.12);
}

/* ============================================================
   ELEMENT DEFAULTS — semantic styles you get for free
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-weight: 600; }
h5 { font-size: var(--text-lg); font-weight: 600; }
h6 { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }

p { margin: 0; line-height: var(--leading-body); text-wrap: pretty; }
p + p { margin-top: 1em; }

small { font-size: var(--text-sm); color: var(--fg-muted); }

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-strong); text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

/* Eyebrow / overline */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

/* Numeric / coin amounts — always tabular */
.numeric, .coin-amount {
  font-family: var(--font-numeric);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Selection */
::selection { background: var(--gold-300); color: var(--ink-900); }

/* Focus — gold ring, always visible */
:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}