/* 852 Made design tokens.
   This file is the one source for colour, type, shape and motion values on every 852 site.
   A site copies tokens.css and fonts/ unchanged into the same folder, links tokens.css
   before its own CSS, and names itself with <html data-site="games|events"> to get its accent.
   Contrast ratios for every pair are listed in README.md. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&family=Noto+Sans+TC:wght@400;500;700;900&family=Press+Start+2P&display=swap');

@font-face {
  font-family: 'Fusion Pixel 12';
  src: url('fonts/fusion-pixel-12px-proportional-zh_hk.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* 墨 ink on 紙 paper and 和紙 washi */
  --text: #1f1a33;
  --text-2: #554d6b;
  --text-3: #6b6382;
  --page: #f1e7d3;
  --surface: #fffaf0;
  --surface-2: #e6d8bc;
  --border: #1f1a33;
  --frame-inner: #e6d8bc;
  --shadow: #1f1a33;
  --dot: rgba(31, 26, 51, 0.07);

  /* 朱 belongs to the seal; a site's accent is its own */
  --seal: #e2483d;
  --seal-carve: #fffaf0;
  --accent: #b8321f;
  --on-accent: #fffaf0;

  /* 金 for rewards, plus the two states */
  --gold: #7f5a12;
  --gold-fill: #f5c04a;
  --on-gold: #1a1530;
  --success: #17704c;
  --danger: #c22b2b;

  --font-body: 'Plus Jakarta Sans', 'Noto Sans TC', 'PingFang HK', 'Microsoft JhengHei', sans-serif;
  --font-display: 'Noto Sans TC', 'Plus Jakarta Sans', 'PingFang HK', 'Microsoft JhengHei', sans-serif;
  --font-pixel: 'Fusion Pixel 12', 'Noto Sans TC', monospace;
  --font-arcade: 'Press Start 2P', 'Fusion Pixel 12', monospace;

  --line: 3px;
  --radius: 6px;
  --lift: 5px;
  --press: 3px;
  --beat: 80ms;

  color-scheme: light;
}

:root[data-site="games"] { --accent: #1f5fbf; }
:root[data-site="events"] { --accent: #a84400; --page: #e8f1f7; }
:root[data-site="md"] { --page: #fbf7ee; }

/* Dark follows the system unless the page pins data-theme="light"; data-theme="dark" forces it.
   The two blocks hold the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #f6efe2;
    --text-2: #c4bada;
    --text-3: #a39ac0;
    --page: #120f26;
    --surface: #221c3d;
    --surface-2: #2f2752;
    --border: #f6efe2;
    --frame-inner: #4a3f78;
    --shadow: #000000;
    --dot: rgba(246, 239, 226, 0.08);
    --accent: #ff8a70;
    --on-accent: #1a1530;
    --gold: #f5c04a;
    --success: #4fd8a0;
    --danger: #ff8a8a;
    color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-site="games"] { --accent: #7fb2ff; }
  :root:not([data-theme="light"])[data-site="events"] { --accent: #ffa04d; --page: #0d0b1f; }
  :root:not([data-theme="light"])[data-site="md"] { --page: #120f26; }
}

:root[data-theme="dark"] {
  --text: #f6efe2;
  --text-2: #c4bada;
  --text-3: #a39ac0;
  --page: #120f26;
  --surface: #221c3d;
  --surface-2: #2f2752;
  --border: #f6efe2;
  --frame-inner: #4a3f78;
  --shadow: #000000;
  --dot: rgba(246, 239, 226, 0.08);
  --accent: #ff8a70;
  --on-accent: #1a1530;
  --gold: #f5c04a;
  --success: #4fd8a0;
  --danger: #ff8a8a;
  color-scheme: dark;
}
:root[data-theme="dark"][data-site="games"] { --accent: #7fb2ff; }
:root[data-theme="dark"][data-site="events"] { --accent: #ffa04d; --page: #0d0b1f; }
:root[data-theme="dark"][data-site="md"] { --page: #120f26; }