/* =====================================================================
   THEME  -  colours and fonts for the whole kweazy.com site
   Edit the values after the colons and save. Every page follows this file.
   Keep the ; at the end of each line. Colours are written like #1a2b3c.
   ===================================================================== */

/* ---------- Fonts (files are in the assets/fonts folder) ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/assets/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/assets/fonts/dm-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- LIGHT mode ---------- */
:root {
  --bg: #f1f4f9;          /* page background */
  --surface: #ffffff;     /* cards and panels */
  --surface-2: #e8edf5;   /* buttons, chips, soft areas */
  --ink: #141824;         /* main text */
  --muted: #566074;       /* secondary text */
  --line: #d6dce8;        /* borders */
  --focus: #2f6bff;       /* keyboard focus ring */
  --shadow: 0 1px 2px rgba(20, 24, 36, .06), 0 6px 20px rgba(20, 24, 36, .06);

  --f-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;   /* headings */
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;       /* normal text */
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;              /* numbers and small labels */

  /* Card colours for the home page (use the colour name in a game's game.json) */
  --c-red: #e5382b;
  --c-indigo: #4d46e5;
  --c-green: #0c8f6b;
  --c-blue: #2f6bff;
  --c-orange: #e8741f;
  --c-purple: #8a3fd1;
  --c-pink: #d6336c;
  --c-teal: #0a8ea0;
  --on-color: #ffffff;    /* text on those colours */

  color-scheme: light;
}

/* ---------- DARK mode (used when the visitor's device is set to dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e111a; --surface: #171b27; --surface-2: #212637; --ink: #edf0f8; --muted: #9aa3b8; --line: #2b3247;
    --focus: #7aa2ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --c-red: #ff5a4d; --c-indigo: #8f8aff; --c-green: #3fd6ad; --c-blue: #7aa2ff;
    --c-orange: #ffa05a; --c-purple: #c08bff; --c-pink: #ff7aa8; --c-teal: #4fd1e0;
    --on-color: #101420;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e111a; --surface: #171b27; --surface-2: #212637; --ink: #edf0f8; --muted: #9aa3b8; --line: #2b3247;
  --focus: #7aa2ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --c-red: #ff5a4d; --c-indigo: #8f8aff; --c-green: #3fd6ad; --c-blue: #7aa2ff;
  --c-orange: #ffa05a; --c-purple: #c08bff; --c-pink: #ff7aa8; --c-teal: #4fd1e0;
  --on-color: #101420;
  color-scheme: dark;
}