/*
 * Shell variable contract. Core defines every value in every theme. A game sets only its accent (from its
 * stone: --gc-accent, or --gc-accent-light and --gc-accent-dark) and, if it has a theme switch, the data-gc-theme attribute on <html>; it sets no other shell token.
 * Core components and the placeholder screen read only these variables.
 *
 *   --gc-surface  page background
 *   --gc-panel    raised panel and card background
 *   --gc-text     primary text color
 *   --gc-accent   highlight color (links, badges, buttons)
 *   --gc-on-accent text on an accent-filled control (primary buttons, the toggle, the selected segment)
 *   --gc-line     borders and rules of controls (3:1 on the page and the panel)
 *   --gc-danger   error text and borders (4.5:1 on the page and the panel)
 *   color-scheme  set with each theme, so native controls (fields, scrollbars) follow it
 *
 * Themes: data-gc-theme="light" | "dark" | "contrast" on <html> wins; without it the system setting decides
 * (light, or dark under prefers-color-scheme: dark). "contrast" is the shared high-contrast theme (7:1 and up).
 * A game sets its accent with --gc-accent on :root (one color for light and dark, at least 4.5:1 on both pages); without
 * one, the Pebble Box blue. A stone that cannot pass on both pages sets the per-theme hooks --gc-accent-light and
 * --gc-accent-dark instead, each at least 4.5:1 on its own page and panel (a plain --gc-accent wins over them). The contrast theme
 * ignores all of them. The dark values
 * appear twice (system dark, and the explicit attribute) because CSS cannot share a block between
 * a media query and a selector; tests/tokens-contrast.test.ts keeps the two identical.
 *
 * Brand tokens (Pebble Box): light is "Paper", dark is "Night Slate" (Telesto's dark: charcoal with warm ivory text and a soft blue accent).
 *
 *   --gc-box / --gc-moon / --gc-ring / --gc-glow  the logo mark
 *   --gc-stone-<id>   the eight game stones (ids in core/sdk/stones.ts)
 *   --gc-on-stone     text color that passes 4.5:1 on every stone
 *   --gc-moon-edge    thin edge that keeps a stone readable on a pale page
 *
 * Defaults follow the system color scheme.
 */
@import "./controls.css";

/* The two brand faces, self-hosted (the game CSP allows font-src 'self' only): latin variable fonts, SIL OFL 1.1
 * (licenses beside the files). Other scripts fall back to system-ui. A game's bundler resolves these urls from this
 * file; the home site publishes the same files under /fonts/. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/figtree-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --gc-surface: #f4ecdf;
  --gc-panel: #fffaf1;
  --gc-text: #1d2730;
  --gc-on-accent: #ffffff;
  --gc-line: #6f6558;
  --gc-danger: #a3281e;

  --gc-box: #2c5878;
  --gc-moon: #cfcbe8;
  --gc-ring: #a9a4f0;
  --gc-glow: #f2b66d;

  --gc-stone-sky: #8db4d6;
  --gc-stone-moss: #7fa38a;
  --gc-stone-clay: #d98e73;
  --gc-stone-lilac: #a9a4f0;
  --gc-stone-teal: #6fc3c9;
  --gc-stone-amber: #f2b66d;
  --gc-stone-rose: #e39ab0;
  --gc-stone-sand: #c9b88c;
  --gc-on-stone: #161b22;
  --gc-moon-edge: #1d2730;

  --gc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --gc-font-body: "Figtree", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-gc-theme]) {
    color-scheme: dark;
    --gc-surface: #1a1d24;
    --gc-panel: #242833;
    --gc-text: #f0e8da;
    --gc-on-accent: #14181f;
    --gc-line: #8d95a6;
    --gc-danger: #ff9d8f;
    --gc-moon-edge: transparent;
  }
}

:root[data-gc-theme="dark"] {
  color-scheme: dark;
  --gc-surface: #1a1d24;
  --gc-panel: #242833;
  --gc-text: #f0e8da;
  --gc-on-accent: #14181f;
  --gc-line: #8d95a6;
  --gc-danger: #ff9d8f;
  --gc-moon-edge: transparent;
}

/* The accent sits in zero-specificity rules, so a game's own `--gc-accent` on :root wins in light and dark alike, and
   the per-theme hooks apply when it sets none. The contrast theme below is more specific and wins over both. */
:where(:root) {
  --gc-accent: var(--gc-accent-light, #2c5878);
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-gc-theme])) {
    --gc-accent: var(--gc-accent-dark, #a9c1ea);
  }
}

:where(:root[data-gc-theme="dark"]) {
  --gc-accent: var(--gc-accent-dark, #a9c1ea);
}

/* The shared high-contrast theme: black page, white text, yellow accent. It sets the accent itself and wins over
   a game's own accent, because a stone color cannot be trusted to reach 7:1 on black. */
:root[data-gc-theme="contrast"] {
  color-scheme: dark;
  --gc-surface: #000000;
  --gc-panel: #0d0d0d;
  --gc-text: #ffffff;
  --gc-accent: #ffe14d;
  --gc-on-accent: #000000;
  --gc-line: #ffffff;
  --gc-danger: #ff9a8a;
  --gc-moon-edge: #ffffff;
}