/* Editorial Magazine — Design Tokens
   Inspired by The Economist + Bloomberg Businessweek + Stratechery.
   Warm cream + navy + rust/oxblood + black. No gradient cards. Flat editorial. */

:root {
  /* === Paper / Surfaces === */
  --paper:           #faf6ef;      /* warm cream — primary canvas */
  --paper-warm:      #f5efe2;      /* warmer alt — for cta-hero / cta-card */
  --paper-dark:      #f1ece2;      /* slightly darker for alt sections */
  --paper-tone:      #e9e2d4;      /* muted band */
  --paper-edge:      #d6cdb9;      /* divider */
  --ink-bg:          #16182d;      /* navy/black for dark sections */
  --ink-bg-2:        #0a0b1a;
  --pull-bg:         #2a2316;      /* warm dark for pull quotes */

  /* === Ink (text on paper) === */
  --ink:             #16182d;      /* navy near-black — body & headers */
  --ink-soft:        #2c3144;
  --ink-muted:       #5a5f72;
  --ink-faint:       #8a8d9c;
  --ink-line:        #c8c2b3;      /* hairlines on paper */
  --ink-inverse:     #faf6ef;
  --ink-inverse-2:   rgba(250,246,239,0.72);

  /* === Editorial accents === */
  --rust:            #b34a2e;      /* primary editorial accent */
  --rust-bright:     #d8593a;
  --rust-deep:       #823621;
  --rust-tint:       #f4ddd3;

  --oxblood:         #6b1f1f;
  --mustard:         #c4943c;
  --olive:           #6a6b3a;
  --teal-deep:       #1d4a4e;
  --plum:            #4b2546;

  /* Category swatches — for color-coded section strips */
  --cat-reviews:     #b34a2e;
  --cat-ranking:     #1d4a4e;
  --cat-networks:    #6a6b3a;
  --cat-payments:    #c4943c;
  --cat-wallets:     #4b2546;
  --cat-tokens:      #823621;
  --cat-rewards:     #2a4d27;
  --cat-games:       #6b1f1f;
  --cat-kyc:         #3b4a6b;
  --cat-about:       #16182d;
  --cat-tools:       #5e3a72;
  --cat-glossary:    #8a6a2c;

  /* Score / status (subdued, no rgb neon) */
  --status-strong:   #2a4d27;
  --status-mid:      #c4943c;
  --status-weak:     #6b1f1f;

  /* === Spacing (editorial rhythm) === */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 44px; --s8: 64px; --s9: 88px; --s10: 120px;
  --s12: 160px; --s14: 200px;

  /* === Typography — magazine pairing === */
  /* Display: Inter Tight 800-900 — bold sans for hero/headlines */
  /* Body:    Newsreader / Source Serif — long-form reading */
  /* Caption: Inter — sans for meta/captions/UI chrome */
  /* Numeric: JetBrains Mono — tabular data */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:    'Newsreader', 'Source Serif Pro', 'Charter', Georgia, serif;
  --font-caption: 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  /* aliases (legacy class names use --ff-mono) */
  --ff-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Modular scale */
  --fs-3xs:  12px;
  --fs-2xs:  12px;
  --fs-xxs:  12px;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 17px;       /* body — slightly larger for editorial reading */
  --fs-md:   19px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;
  --fs-6xl:  108px;
  --fs-7xl:  140px;       /* magazine-cover headlines */

  --lh-tight: 0.98;
  --lh-snug:  1.12;
  --lh-base:  1.62;       /* serif body reads tighter than sans */
  --lh-loose: 1.8;

  --fw-r: 400;
  --fw-m: 500;
  --fw-s: 600;
  --fw-b: 700;
  --fw-k: 800;
  --fw-x: 900;

  /* === Radii — editorial uses minimal radius === */
  --r-0:    0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-full: 9999px;

  /* === Hairlines === */
  --hairline: 1px solid var(--ink-line);
  --hairline-ink: 1px solid var(--ink);
  --rule-thick: 4px solid var(--ink);

  /* === Shadows — editorial uses very subtle === */
  --sh-xs: 0 1px 0 var(--ink-line);
  --sh-sm: 0 1px 0 var(--ink-line), 0 2px 8px rgba(22,24,45,0.04);
  --sh-md: 0 2px 0 var(--ink-line), 0 8px 24px rgba(22,24,45,0.06);

  /* === Containers (editorial widths) === */
  --w-reading:  680px;     /* single-column reading width */
  --w-tight:    760px;
  --w-base:     1080px;
  --w-wide:     1240px;
  --w-mega:     1440px;

  /* === Z === */
  --z-base: 1; --z-elev: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 900;

  /* === Motion === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;

  /* === Touch + safe-area (mobile-first) === */
  --touch-target-min: 44px;
  --container-pad-mobile: 16px;
  --container-pad-tablet: 24px;
  --container-pad-desktop: 32px;
}

@media (max-width: 640px) {
  :root {
    --fs-7xl: 64px;
    --fs-6xl: 56px;
    --fs-5xl: 44px;
    --fs-4xl: 36px;
    --fs-3xl: 28px;
    --fs-2xl: 24px;
    --fs-base: 16px;
    --s10: 80px;
    --s12: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}