/* Hyxor design tokens.
 *
 * The palette is written like a terminal theme: a background, a foreground,
 * a few greys, and the player colours. Light and dark are a pair, chosen by
 * the system setting, with [data-theme] available as a manual override.
 *
 * Import this file; do not retype the values. If a value you need is not
 * here, add a token rather than hard-coding a colour in a template.
 */

:root {
  /* ---- type ---- */
  --font-mono: 'Letter Gothic Std', 'Letter Gothic', 'Spline Sans Mono', ui-monospace, monospace;
  --font-prose: 'Newsreader', Georgia, serif;

  --track-mono: 0.04em;      /* all mono text */
  --track-heading: 0.06em;   /* h1, h2 */
  --track-logo: 0.08em;      /* the "Hyxor" wordmark */

  --text-xs: 12px;           /* footer, captions, table headers */
  --text-sm: 13px;           /* section labels, meta */
  --text-base: 15px;         /* UI and data */
  --text-prose: 19px;        /* serif reading text, line-height 1.6 */
  --text-h2: 17px;
  --text-h1: 30px;
  --text-logo: 28px;
  --text-stat: 24px;         /* big numbers in a header band */

  /* ---- spacing (use these, not arbitrary values) ---- */
  --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;

  /* ---- layout ---- */
  --page-max: 1200px;        /* single column, centred */
  --measure: 680px;          /* max width of prose */
  --text-max: 680px;         /* max width of ANY running text (~70 chars):
                                paragraphs, lists, meta lines, copy slots,
                                descriptions beside headings. Tables, code,
                                figures and the game screen are exempt. */
  --figure-max: 920px;       /* diagrams and code blocks */
  --board-max: 820px;        /* game board inside its screen */
  --tap: 44px;               /* minimum tap target */
  --rule: 1px;               /* every divider; no thicker borders */
  --accent-bar: 2px;         /* active nav item, token underlines */
}

/* ---- dark (default) ---- */
:root,
:root[data-theme="dark"] {
  --bg: #13071b;             /* page */
  --surface: #1c0f26;        /* code blocks */
  --panel: #0a0a0c;          /* explanatory diagram panel */
  --screen: #0a0a0c;         /* game board background: always dark */
  --screen-text: #a495b3;    /* text on --screen (placeholders): same in both themes */
  --fg: #e6dcef;             /* UI text, links */
  --fg-prose: #d6cadf;       /* serif reading text */
  --dim: #a495b3;            /* labels, meta, secondary */
  --faint: #8a7b99;          /* tertiary notes */
  --rule-color: #3a2a48;     /* section rules, header rule */
  --rule-soft: #2a1d36;      /* table row dividers */
  --control: #6b5a7c;        /* button borders, link underline colour */
  --accent: #ffd25a;         /* active nav bar, footer game tag, slider */

  --won: #5ee070;            /* "Won" text */
  /* Player colours: fills on the dark screen. These must match the game
     renderers (Dye board, Dots map); the renderer is the source of truth. */
  --player-1: #5ee070;
  --player-2: #ffd25a;
  --player-3: #4fb4ff;
  --player-4: #ff6b5a;
  --player-5: #c9a3ff;
}

/* ---- light ---- */
:root[data-theme="light"] {
  --bg: #f4f0f6;
  --surface: #e9e1ef;
  --panel: #ebe4f0;          /* diagrams follow the theme */
  --screen: #13071b;         /* game boards stay dark in light mode */
  --fg: #1d1024;
  --fg-prose: #2e2236;
  --dim: #5e5068;
  --faint: #6e6078;
  --rule-color: #d8cde0;
  --rule-soft: #e6dded;
  --control: #a594b3;
  --accent: #6a2fa0;

  --won: #1f8a3a;            /* darker so it passes contrast on --bg */
  /* Player colours outside the board (swatches, bars, diagram strokes).
     On the board itself, keep the renderer's own colours. */
  --player-1: #3fbf55;
  --player-2: #e8b420;
  --player-3: #2f8fe0;
  --player-4: #e5533f;
  --player-5: #7a3fc0;
  /* Use these when player colour is applied to TEXT on a light background. */
  --player-1-text: #1f8a3a;
  --player-3-text: #1f6fb8;
  --player-4-text: #c2412f;
  --player-5-text: #7a3fc0;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f0f6;
    --surface: #e9e1ef;
    --panel: #ebe4f0;
    --screen: #13071b;
    --fg: #1d1024;
    --fg-prose: #2e2236;
    --dim: #5e5068;
    --faint: #6e6078;
    --rule-color: #d8cde0;
    --rule-soft: #e6dded;
    --control: #a594b3;
    --accent: #6a2fa0;
    --won: #1f8a3a;
    --player-1: #3fbf55;
    --player-2: #e8b420;
    --player-3: #2f8fe0;
    --player-4: #e5533f;
    --player-5: #7a3fc0;
    --player-1-text: #1f8a3a;
    --player-3-text: #1f6fb8;
    --player-4-text: #c2412f;
    --player-5-text: #7a3fc0;
  }
}

/* ---- base ---- */
html { background: var(--bg); color-scheme: light dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--track-mono);
}
a {
  color: var(--fg);
  text-decoration-color: var(--control);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--fg); }