/* Every colour, size and space the product uses, once, with a dark set.
 *
 * Every surface imports this file, and no other stylesheet or page writes a colour of its
 * own: a ratchet in harness.config.mjs refuses a hex colour anywhere else under public/
 * or src/. ops/web-contrast.mjs measures every text and background pair the stylesheets
 * use, in both sets.
 *
 * The look (P7 of thoughts/plans/2026-09-24-m1-polish.md): soft, squishy and bright, as the
 * PRD's section 10 asks. A cream ground and a deep plum ink by day, a plum night by night; a
 * grape accent, a saturated court and a ball-yellow for the moments that shout. Controls and
 * panels share one edge colour and one set of radii and shadows, so every screen is one kit.
 * The display face is Fredoka (public/fonts/, under the SIL Open Font License in OFL.txt
 * beside it); body text stays in the system face, which reads best small.
 */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/fredoka-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;
}

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* The ground, a raised surface (a button, a card, a panel), and a sunken one. */
  --paper: #fff6e6;
  --paper-2: #ffffff;
  --paper-3: #fcebcf;
  --ink: #2b1d3f;
  --ink-2: #4b3d63;
  --muted: #6a5c80;
  --line: #ead8bb;
  /* The one outline every control and panel wears, and the hard shadow under it: the same
     plum by day; by night a light outline, which reads on the dark ground, over a dark shadow. */
  --edge: #2b1d3f;
  --edge-shadow: #2b1d3f;
  --accent: #6b3fd4;
  --accent-ink: #ffffff;
  --danger: #c1272d;
  /* A keyboard's focus ring, on the ground and on the court. */
  --focus: #0a6cff;
  --focus-court: #ffe45c;
  /* The Big Point overlay (src/client/screens/bigpoint.js): a timer's last seconds and a
     FOOLED!, a READ IT!, and the mini court with its lines, its words and a picked zone. */
  --warn: #b54700;
  --good: #1c7a3f;
  --court: #23794a;
  --court-line: #ffffff;
  --court-ink: #ffffff;
  --court-pick: #134a2b;
  /* The point on the court (src/client/stage/stage.js, item 2.8): the net's mesh, drawn
     see-through over the court, and a Big Point's letterbox bars. */
  --court-net: #0f3d24;
  --letterbox: #2b1d3f;
  /* The pastel round the court: the landing's lawn. */
  --lawn: #cdeed5;
  /* The stakes banner and every loud label (AUTOPILOT, Reconnecting): grape with ball-yellow
     words, the same drama in both sets. */
  --banner: #3d1f8f;
  --banner-ink: #ffe45c;
  --banner-ink-2: #ffffff;
  /* The ball, and the seam on it. */
  --ball: #e6f24a;
  --ball-seam: #ffffff;

  /* The stage (src/client/stage/): a blob colour for each seat, the eyes, the shine and the
     shadow under a blob. The canvas reads these through getComputedStyle, never a literal. */
  --blob-1: #3a9ef0;
  --blob-2: #f2704f;
  --blob-3: #4fbf6a;
  --blob-4: #a57cf5;
  --blob-ink: #2b1d3f;
  --blob-shine: #ffffff;
  --blob-shadow: #2b1d3f;
  /* What a blob wears (src/client/stage/wear.js, item 2.9): the hats' colours, the white of a
     googly eye, a sparkly eye's glint, and a tired blob's sweat. */
  --hat-red: #e2463f;
  --hat-cream: #efe2bf;
  --hat-gold: #f2b928;
  --hat-green: #2f9d6a;
  --hat-blue: #3a78d6;
  --hat-white: #ffffff;
  --hat-petal: #ffb3d1;
  --eye-white: #ffffff;
  --eye-glint: #ffe45c;
  --blob-sweat: #6cc4ff;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* The type scale. --size-0 is the least any text is (14 px); --size-2 the least a choice is
     (20 px), as the PRD's section 10 asks. --size-4, the pop-up words, and --size-5, the
     logo, shrink on a narrow phone rather than overflow. */
  --size-0: 0.875rem;
  --size-1: 1rem;
  --size-2: 1.25rem;
  --size-3: 1.75rem;
  --size-4: clamp(2rem, 10vw, 2.5rem);
  --size-5: clamp(2.25rem, 12vw, 4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  /* Radii: a tag, a control, a panel, and a pill. */
  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  /* The outline's widths: a control, a panel. */
  --edge-1: 3px;
  --edge-2: 2px;
  /* Hard cartoon shadows: a control at rest, pressed, and a panel. */
  --shadow: 0 4px 0 var(--edge-shadow);
  --shadow-pressed: 0 1px 0 var(--edge-shadow);
  --shadow-panel: 0 3px 0 var(--line);
  /* How far a control sinks when pressed: the shadow it gives up. */
  --press: 3px;

  --measure: 38rem;
  /* The least a control measures in both directions: 48 px, a thumb (D8). */
  --tap: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b1626;
    --paper-2: #272038;
    --paper-3: #2f2745;
    --ink: #f6efe4;
    --ink-2: #d7cde6;
    --muted: #b0a5c4;
    --line: #3d3456;
    --edge: #8d7fb5;
    --edge-shadow: #0b0812;
    --accent: #b79bff;
    --accent-ink: #1b1030;
    --danger: #ff8f8f;
    --focus: #7cc4ff;
    --focus-court: #ffe45c;
    --warn: #ffb057;
    --good: #74dc92;
    --court: #1d6a41;
    --court-line: #d4ecd9;
    --court-ink: #ffffff;
    --court-pick: #0e3b22;
    --court-net: #07210f;
    --letterbox: #0b0812;
    --lawn: #1f3a2c;
    --banner: #5a36c9;
    --banner-ink: #ffe45c;
    --banner-ink-2: #ffffff;
    --ball: #e6f24a;
    --ball-seam: #ffffff;
    --blob-1: #5fb4ff;
    --blob-2: #ff8c6e;
    --blob-3: #6fd488;
    --blob-4: #bb9cff;
    --blob-ink: #1b1626;
    --blob-shine: #ffffff;
    --blob-shadow: #000000;
    --hat-red: #ff6b5e;
    --hat-cream: #e8d9b0;
    --hat-gold: #ffc53d;
    --hat-green: #3fb87e;
    --hat-blue: #5b93ee;
    --hat-white: #f4eefb;
    --hat-petal: #ffc2da;
    --eye-white: #ffffff;
    --eye-glint: #ffe45c;
    --blob-sweat: #8fd3ff;
  }
}

:root[data-theme="dark"] {
  --paper: #1b1626;
  --paper-2: #272038;
  --paper-3: #2f2745;
  --ink: #f6efe4;
  --ink-2: #d7cde6;
  --muted: #b0a5c4;
  --line: #3d3456;
  --edge: #8d7fb5;
  --edge-shadow: #0b0812;
  --accent: #b79bff;
  --accent-ink: #1b1030;
  --danger: #ff8f8f;
  --focus: #7cc4ff;
  --focus-court: #ffe45c;
  --warn: #ffb057;
  --good: #74dc92;
  --court: #1d6a41;
  --court-line: #d4ecd9;
  --court-ink: #ffffff;
  --court-pick: #0e3b22;
  --court-net: #07210f;
  --letterbox: #0b0812;
  --lawn: #1f3a2c;
  --banner: #5a36c9;
  --banner-ink: #ffe45c;
  --banner-ink-2: #ffffff;
  --ball: #e6f24a;
  --ball-seam: #ffffff;
  --blob-1: #5fb4ff;
  --blob-2: #ff8c6e;
  --blob-3: #6fd488;
  --blob-4: #bb9cff;
  --blob-ink: #1b1626;
  --blob-shine: #ffffff;
  --blob-shadow: #000000;
  --hat-red: #ff6b5e;
  --hat-cream: #e8d9b0;
  --hat-gold: #ffc53d;
  --hat-green: #3fb87e;
  --hat-blue: #5b93ee;
  --hat-white: #f4eefb;
  --hat-petal: #ffc2da;
  --eye-white: #ffffff;
  --eye-glint: #ffe45c;
  --blob-sweat: #8fd3ff;
}