/* ─── Platytutor design tokens ─────────────────────────────────────────────
   Warm storybook palette built around our platypus mascot.
   Deep navy ink on cream paper, with coral/mint/sun accents.            */

:root {
  /* Paper & ink */
  --paper: #fdf4e3;
  --paper-deep: #f6e9cd;
  --paper-edge: #ecdcb6;
  --ink: #1b3a5b;
  --ink-soft: #3d5775;
  --ink-muted: #7b8aa0;

  /* Primary characters */
  --coral: #ff6b6b;
  --coral-deep: #e8514d;
  --mint: #7ecec4;
  --mint-deep: #4ab0a4;
  --sun: #ffd23f;
  --sun-deep: #f2b705;
  --berry: #d65d9e;
  --sky: #6fb3e0;
  --sky-deep: #2f7fb5;         /* text-safe sky on cream paper */

  /* Semantic */
  --primary: var(--coral);
  --primary-deep: var(--coral-deep);
  --accent: var(--sun);
  --success: #5bb974;
  --error: #e8514d;
  --danger: var(--error);
  --info: #0d6efd;
  --info-bright: #4f7cff;
  --info-soft: rgba(13, 110, 253, 0.08);
  --warning: #ffc107;
  --warning-soft: #fff3cd;
  --warning-text: #856404;

  /* On-color foreground (text/icons on strong fills) */
  --on-color: #fff;

  /* Neutral scale (Bootstrap-derived greys used by games/editor) */
  --neutral-100: #f8f9fa;
  --neutral-150: #f1f3f5;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #adb5bd;
  --neutral-500: #ced4da;
  --neutral-600: #6c757d;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;

  /* Alpha helpers — collapse repeated rgba() literals */
  --ink-focus: rgba(27, 58, 91, 0.12);
  --ink-shadow: rgba(27, 58, 91, 0.92);   /* stamp offset color; custom lifts use this */
  --ink-wash: rgba(27, 58, 91, 0.07);     /* paper grain dots */
  --ink-inset: rgba(27, 58, 91, 0.05);
  --ink-scrim-soft: rgba(27, 58, 91, 0.4);
  --ink-scrim: rgba(27, 58, 91, 0.5);
  --ink-scrim-deep: rgba(27, 58, 91, 0.7);
  --error-muted: rgba(232, 81, 77, 0.12);
  --mint-muted: rgba(126, 206, 196, 0.18);
  --mint-active: rgba(126, 206, 196, 0.28);
  --mint-glow: rgba(126, 206, 196, 0.22);
  --coral-glow: rgba(255, 107, 107, 0.14);
  --coral-soft: rgba(255, 107, 107, 0.07);
  --coral-ring: rgba(255, 107, 107, 0.22);
  --sun-glow: rgba(255, 210, 63, 0.22);
  --paper-scrim: rgba(253, 244, 227, 0.92);
  --paper-on-dark: rgba(253, 244, 227, 0.85);
  --paper-on-dark-soft: rgba(253, 244, 227, 0.08);
  --paper-on-dark-mid: rgba(253, 244, 227, 0.14);
  --paper-on-dark-muted: rgba(253, 244, 227, 0.4);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-92: rgba(255, 255, 255, 0.92);
  --info-wash: rgba(13, 110, 253, 0.06);
  --info-ring: rgba(13, 110, 253, 0.25);
  --info-mid: rgba(13, 110, 253, 0.18);
  --info-bright-soft: rgba(79, 124, 255, 0.08);
  --info-bright-ring: rgba(79, 124, 255, 0.18);
  --info-border-soft: #dbe5ff;
  --warning-ring: rgba(255, 193, 7, 0.45);
  --warning-border: rgba(255, 193, 7, 0.35);
  --warning-wash: rgba(255, 193, 7, 0.1);
  --warning-mid: rgba(255, 193, 7, 0.25);
  --success-ring: rgba(25, 135, 84, 0.28);
  --success-glow: rgba(25, 135, 84, 0.5);
  --success-wash: rgba(25, 135, 84, 0.22);
  --danger-bs-soft: rgba(220, 53, 69, 0.1);
  --mint-deep-muted: rgba(78, 176, 164, 0.18);
  --mint-deep-border: rgba(78, 176, 164, 0.28);
  --neutral-100-soft: rgba(248, 249, 250, 0.8);
  --neutral-100-mid: rgba(248, 249, 250, 0.6);
  --neutral-100-strong: rgba(248, 249, 250, 0.9);
  --sun-ring: rgba(255, 210, 63, 0.45);
  --sun-pale: rgba(255, 236, 179, 0.35);
  --black-04: rgba(0, 0, 0, 0.04);
  --black-18: rgba(0, 0, 0, 0.18);
  --black-28: rgba(0, 0, 0, 0.28);
  --paper-warm: #eedfc0;
  --beam: #3d2e1e;
  --berry-bright: #d6336c;
  --sun-border: #ffd54f;
  --paper-glow: #fff8e1;
  --paper-glow-deep: #fff7d6;
  --paper-glow-light: #fffef6;
  --slate-blue: #3b82f6;
  --slate-grey: #dce3e6;
  --success-pale: #b7e4c7;
  --amber-soft: rgba(255, 182, 72, 0.12);
  --amber-ring: rgba(255, 182, 72, 0.3);

  /* Status badge trio (admin / statistics / parent) */
  --badge-success-bg: #d4f4dd;
  --badge-success-fg: #2a7a3e;
  --badge-warning-bg: #fff0cc;
  --badge-warning-fg: #8a6200;
  --badge-danger-bg: #fde5e5;
  --badge-danger-fg: #b83232;

  /* Surfaces */
  --card: #fffaf0;
  --card-soft: #fff5e0;
  --mint-surface: #eaf6f2;
  --danger-border: #f5c2c7;
  --danger-bg-soft: #fff5f5;
  --rope: #c4a478;                        /* wood/rope accent in scale & sequence */
  --sun-light: #fff6d9;
  --sun-hot: #f5b800;
  --success-deep: #198754;
  --success-mid: #75b798;
  --line: rgba(27, 58, 91, 0.14);
  --line-strong: rgba(27, 58, 91, 0.22);

  /* Shadow — offset hand-drawn style */
  --shadow-stamp: 4px 4px 0 var(--ink-shadow);
  --shadow-stamp-sm: 3px 3px 0 var(--ink-shadow);
  --shadow-soft: 0 14px 32px var(--ink-focus);
  --shadow-soft-lg: 0 24px 50px color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-inset-paper: inset 0 1px 0 var(--white-70);

  /* Radii — slightly irregular, storybook feel */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Fonts */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;

  /* Legacy bridge (existing game-styles.css / memory board) */
  --bg-1: var(--paper);
  --bg-2: var(--paper-deep);
  --bg-3: var(--paper);
  --primary-dark: var(--coral-deep);
  --secondary: var(--berry);
  --accent-soft: #ffe8a8;
  --text: var(--ink);
  --muted: var(--ink-muted);
  --border: var(--line);
  --shadow: var(--shadow-soft);
  --shadow-hover: var(--shadow-soft-lg);
  --card-radius: var(--r-lg);
  --playing-card-width: 165px;
  --playing-card-height: 220px;
  --tile-front: linear-gradient(180deg, var(--card), var(--paper-glow-deep));
  --tile-back: linear-gradient(135deg, var(--ink), var(--ink-soft));
  --tile-matched: linear-gradient(135deg, var(--mint-deep), var(--mint));

  /* Breakpoints — CSS custom properties cannot be used inside @media
     queries, so these are documentation + a single source for JS/tools.
     Always write @media with these exact pixel values:
       sm  ≤576px    phone
       md  ≤768px    tablet   (min-width: 768px for md-up)
       lg  ≤992px    laptop
       xl  ≤1200px   wide layouts (sidebars, multi-pane)
     Prefer fluid clamp()/auto-fill over extra breakpoint rungs. */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
}

/* sm — phone card sizing (canonical --bp-sm) */
@media (max-width: 576px) {
  :root {
    --playing-card-width: 118px;
    --playing-card-height: 162px;
  }
}

/* ─── Scrollbars ──────────────────────────────────────────────────────
   A rounded ink "crayon stroke" resting in a paper-deep groove, so the
   browser chrome reads as part of the storybook page. Warms to coral
   while dragged, like every other pressable thing on the site.        */

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--paper-deep);
  border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb {
  background: var(--ink-soft);
  border-radius: var(--r-full);
  /* Paper-colored border floats the stroke inside the groove. */
  border: 4px solid var(--paper-deep);
  min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--coral);
}

::-webkit-scrollbar-thumb:active {
  background: var(--coral-deep);
}

::-webkit-scrollbar-corner {
  background: var(--paper-deep);
}

/* Firefox has no scrollbar pseudo-elements; give it the same two colors.
   Guarded so Chromium keeps the richer style above. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-soft) var(--paper-deep);
  }
}