/*
 * Design tokens.
 *
 * The palette is the demo's "cream" scheme, copied from public/demo/ui.css
 * unchanged - the block below is what the demo's third swatch sets, and the
 * demo is now the drawing this site is a copy of.
 *
 * Two sets of names, on purpose. The first is the demo's, so its stylesheets
 * can be served here without a single edit. The second is the older set that
 * board.css and the five game stylesheets were written against; those are
 * aliases now, pointing at the first. Changing a colour means changing it
 * once, at the top.
 *
 * One palette for the whole site. The five per-game accents are gone: a game
 * is told apart by its name, its icon and its board, not by repainting the
 * furniture around it. Light only - a dark variant is a second product to
 * keep in step, and this one is not big enough to carry two.
 */

:root {
  --bg:         #fdf8f0;
  --bg-tint:    #f6eee1;
  --surface:    #ffffff;
  --ink:        #1f1a13;
  --ink-soft:   #4f463a;
  --ink-mute:   #8a7d6c;
  --line:       #ece1cf;
  --accent:     #a8451c;
  --accent-ink: #ffffff;
  --accent-soft:#fbe7dd;
  --warm:       #1f6f5c;
  --warm-soft:  #e2f0eb;
  --bad:        #9f1239;
  --bad-soft:   #fce7ef;
  --shadow:     0 1px 2px rgba(31,26,19,.05), 0 10px 26px -14px rgba(31,26,19,.25);

  /* The type. Inter, self-hosted, one variable file for every weight. */
  --font: "Inter";
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-numeric: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------------
   * Aliases, for the stylesheets written before the demo existed.
   * ------------------------------------------------------------------- */
  --surface-page:    var(--bg);
  --surface-card:    var(--surface);
  --surface-sunken:  var(--bg-tint);
  --surface-hover:   color-mix(in srgb, var(--bg-tint) 70%, var(--ink) 6%);

  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-soft);
  --text-muted:      var(--ink-mute);
  --text-inverse:    var(--accent-ink);

  --border-subtle:   var(--line);
  --border-strong:   color-mix(in srgb, var(--line) 55%, var(--ink-mute));

  --accent-hover:    color-mix(in srgb, var(--accent) 88%, #000);
  --accent-text:     var(--accent);

  --good:            var(--warm);
  --good-soft:       var(--warm-soft);
  --warning:         #a35c00;
  --warning-soft:    #fbeade;
  --critical:        var(--bad);
  --critical-soft:   var(--bad-soft);

  /* The streak: its own token, because it is the most important number on
     the site and must not drift with the accent. */
  --streak:          var(--warm);
  --streak-soft:     var(--warm-soft);

  /* Spacing, a 4px scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Type sizes */
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;

  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow);

  /* Motion. Every duration here is zeroed under prefers-reduced-motion. */
  --motion-fast:   120ms;
  --motion-medium: 240ms;
  --motion-reward: 900ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  /* The minimum tap target. Sudoku cells included. */
  --tap-min: 44px;

  --layout-max: 46rem;
}

/*
 * Inter, self-hosted, as one variable file.
 *
 * Google serves Inter v20 as a variable font: one 47 KB download covers every
 * weight from 100 to 900, which is why there is a single @font-face here where
 * Poppins needed three. It also means 650 is a real weight rather than a
 * browser smearing 700, which is what a static face does when asked for one
 * it does not have.
 *
 * Self-hosted because a webfont link is a third-party request before the page
 * can paint, and because nobody should have to tell Google they came here.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.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;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-medium: 0ms;
    --motion-reward: 0ms;
  }
}

:root[data-motion="reduced"] {
  --motion-fast: 0ms;
  --motion-medium: 0ms;
  --motion-reward: 0ms;
}