/* ============================================================
   cheapuno Design Tokens — v2.0
   Single source of truth for ALL CSS values across the site.
   Import at the top of every page: <link rel="stylesheet" href="/shared/design-tokens.css">
   ============================================================ */

:root {

  /* ── Colors: Primary ── */
  --color-primary:       #c13a2a;
  --color-primary-hover: #a82e1e;
  --color-primary-light: #e85d4a;
  --color-primary-tint:  #fff5f3;

  /* ── Colors: Accent ── */
  --color-gold:          #c98a2f;
  --color-gold-light:    #f5d98a;
  --color-gold-tint:     #fff8e5;

  /* ── Colors: Ink & Muted ── */
  --color-ink:           #1a1208;
  --color-ink-secondary: #4a3e38;
  --color-muted:         #7c6c62;
  --color-muted-light:   #b0a097;

  /* ── Colors: Background ── */
  --color-bg:            #faf6f0;
  --color-paper:         #ffffff;
  --color-surface:       #f4ede4;
  --color-surface-hover: #fff2e8;
  --color-warm-mid:      #f0e8dc;

  /* ── Colors: Borders ── */
  --color-line:          #e8ddd2;
  --color-line-strong:   #d0c0b0;

  /* ── Colors: Semantic ── */
  --color-new:           #2563eb;
  --color-trending:      #c13a2a;
  --color-popular:       #c98a2f;
  --color-plum:          #4b314d;

  /* ── Typography ── */
  --font-display: 'Noto Serif TC', 'Noto Serif JP', 'Hiragino Mincho ProN', Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'Noto Sans JP', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Font Sizes (fluid) ── */
  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 1rem;
  --text-lg:   1.1rem;
  --text-xl:   1.3rem;
  --text-2xl:  clamp(1.5rem, 3vw, 2rem);
  --text-3xl:  clamp(2rem, 4.5vw, 3.4rem);
  --text-4xl:  clamp(2.6rem, 6vw, 4.5rem);

  /* ── Font Weights ── */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;
  --weight-black:  900;

  /* ── Spacing ── */
  --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;

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 3px rgba(26,18,8,.06);
  --shadow-sm:   0 2px 8px rgba(26,18,8,.08);
  --shadow-card: 0 2px 12px rgba(26,18,8,.08), 0 1px 3px rgba(26,18,8,.05);
  --shadow-hover: 0 8px 32px rgba(26,18,8,.14), 0 2px 8px rgba(26,18,8,.08);
  --shadow-game: 0 12px 48px rgba(193,58,42,.18);
  --shadow-float: 0 20px 60px rgba(26,18,8,.18);

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --t-fast:   0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   0.38s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --content-max:   1200px;
  --content-wide:  1440px;
  --content-narrow: 760px;
  --page-px:       5vw;
  --nav-h:         64px;

  /* ── Z-index ── */
  --z-base:    1;
  --z-card:    2;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ── Dark overlay utility ── */
.overlay-dark  { background: rgba(26,18,8,.48); }
.overlay-light { background: rgba(250,246,240,.88); }

/* ── Base resets ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; }
img, video { max-width: 100%; display: block; }