/* Design tokens — the one file to tweak between design drafts.
   Draft 2 (2026-09-12): metar-taf language. White ground, near-black ink, Helvetica Neue,
   small uppercase letter-spaced labels, hairline borders, square corners. */
:root {
  /* ground & ink */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #aaaaaa;
  --line: #e6e6e6;
  --line-2: #cccccc;

  /* theme: a deep bottle green, club baize and leather. Used for everything selected, done, or primary. */
  --accent: #0f4c3a;
  --accent-ink: #ffffff;
  --accent-soft: #e4ede8;
  --accent-deep: #0a3629;

  /* the family bubble on the logo (Apple-style glass, the one rounded, translucent element of the shell; same values as Go Master) */
  --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;

  /* semantic (used only on the board and puzzle states) */
  --good: #0f4c3a;
  --bad: #c00000;
  --warn: #7a5c00;

  /* board — colours the owner approved; piece and board art to come from the owner later */
  --sq-light: #efe5d1;
  --sq-dark: #b39877;
  --sq-coord-light: #b39877;
  --sq-coord-dark: #efe5d1;
  --sq-last: rgba(214, 170, 68, 0.55);
  --sq-from: rgba(17, 17, 17, 0.18);
  --sq-check: rgba(192, 0, 0, 0.6);
  --sq-hint: rgba(17, 17, 17, 0.16);
  --sq-dot: rgba(17, 17, 17, 0.22);
  --arrow-main: #1f6b50;
  --arrow-alt: #e8780a;
  --arrow-bad: #c00000;
  --board-anim: 220ms;
  --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 green */
  --act-0: #eeeeee;
  --act-1: #cfdfd6;
  --act-2: #8fb8a5;
  --act-3: #4a856c;
  --act-4: #0f4c3a;

  /* the cat in the box — hints and tips (js/mascot.js). Draft 2 (owner's comment): always in the
     corner and small; it meows and waits to be clicked; smaller bubble with a thinner, lighter line. */
  --mascot-cat-w: 76px;
  --mascot-cat-w-phone: 62px;
  --mascot-stroke: 1.3;                     /* Draft 1: 2.2, full black */
  --mascot-line: rgba(0, 0, 0, 0.42);       /* Draft 1: #000000 */
  --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;
}