/* Design tokens — the one file to tweak between design drafts.
   Draft 1 (2026-09-13): the Chess Master language (metar-taf): white ground, near-black ink, Helvetica Neue,
   small uppercase letter-spaced labels, hairline borders, square corners. Draft 2 (2026-09-13, owner's
   comment): the accent is a dark red, Chess Master's bottle green (HSL 162° 67% 18%) turned to red.
   Draft 2b: one step redder (HSL 357° 82% 24%) after the exact-tone match read as brown.
   Comment on any line here and it becomes a small diff. */
:root {
  /* ground & ink */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #aaaaaa;
  --line: #e6e6e6;
  --line-2: #cccccc;

  /* theme: dark red, the same tone as Chess Master's green. Used for everything selected, done, or primary. */
  --accent: #6f0b10;
  --accent-ink: #ffffff;
  --accent-soft: #efe1e2;
  --accent-deep: #54070b;

  /* the family bubble on the logo (Apple-style glass, the one rounded, translucent element of the shell) */
  --bubble-radius: 22px;          /* the bubble's fillet */
  --bubble-row-radius: 14px;      /* each app's row */
  --bubble-tile-radius: 12px;     /* the logo tile in a row */
  --bubble-bg: rgba(255, 255, 255, 0.38);      /* the glass itself: mostly what is behind, lifted */
  --bubble-blur: 28px;
  --bubble-saturate: 200%;
  --bubble-rim: rgba(255, 255, 255, 0.85);     /* the bright inner ring, light caught on the edge */
  --bubble-edge: rgba(0, 0, 0, 0.08);          /* the hairline that separates the glass from the page */
  --bubble-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 70%);  /* specular, top-left */
  --bubble-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.16);
  --bubble-fallback: #ffffff;     /* where backdrop-filter is not supported */
  --bubble-gap: 8px;              /* space between the logo and the bubble */
  --bubble-anim: 180ms;

  /* the cat in the box — hints and tips (js/mascot.js), the same values as Chess and Poker Master:
     always in the corner and small; it meows and waits to be clicked; a small bubble with a light line. */
  --mascot-cat-w: 76px;
  --mascot-cat-w-phone: 62px;
  --mascot-stroke: 1.3;
  --mascot-line: rgba(0, 0, 0, 0.42);
  --mascot-ink: #000000;                    /* the meow and the hearts' outline — the artwork's black */
  --mascot-paper: rgba(255, 255, 255, 0.97);
  --mascot-tail: 9;
  --mascot-hint: #9a4a1e;      /* the label on a hint — warm, not alarm red: you are being helped */
  --mascot-tip: var(--accent);
  --mascot-heart: #ff8ca0;

  /* semantic (used only on the board and problem states) — green/red mean right/wrong, not theme */
  --good: #0f4c3a;
  --bad: #c00000;
  --warn: #7a5c00;

  /* board — pale kaya wood, thin ink lines, slate and shell stones */
  --gb-wood: #e9cf93;
  --gb-line: #4a3a1e;
  --gb-line-w: 1.1px;
  --gb-star: #4a3a1e;
  --gb-coord: #7a6740;
  --stone-black: #161616;
  --stone-black-edge: #000000;
  --stone-white: #f6f5f0;
  --stone-white-edge: #8a8a80;
  --stone-shadow: rgba(0, 0, 0, 0.28);
  --gb-last-on-black: #f6f5f0;
  --gb-last-on-white: #161616;
  --gb-hint: rgba(111, 11, 16, 0.28);
  --gb-ghost: 0.45;
  --gb-mark-good: #1f8a5c;
  --gb-mark-bad: #c00000;
  --board-anim: 160ms;
  --board-max: 520px;

  /* type */
  --font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: "Courier New", Courier, monospace;
  --fs-0: 11px;
  --fs-1: 13px;
  --fs-2: 15px;   /* body */
  --fs-3: 18px;
  --fs-4: 22px;
  --fs-5: 28px;
  --lh: 1.6;
  --measure: 640px;
  --track: 0.1em;   /* letter-spacing for uppercase labels */

  /* space & shape */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --radius: 0;
  --radius-lg: 0;
  --sidebar-w: 260px;
  --page-w: 900px;

  /* activity grid levels: paper to theme red */
  --act-0: #eeeeee;
  --act-1: #e2cacb;
  --act-2: #c38386;
  --act-3: #983a3e;
  --act-4: #6f0b10;
}