/* 講講樂 — design tokens
   Calm, high-contrast, large-target system for SEN co-play. */

:root {
  /* surfaces */
  --cream: #FBF6EC;
  --cream-deep: #F3EAD9;
  --surface: #FFFFFF;
  --surface-tint: #FFFDF7;

  /* ink */
  --ink: #23211E;
  --ink-soft: #5C5750;
  --ink-faint: #736C63;

  /* brand */
  --teal: #1F6F6B;
  --teal-deep: #15514E;
  --teal-soft: #DCEDEB;
  --coral: #E4604A;
  --coral-soft: #FBE3DE;
  --sun: #F0B429;
  --sun-soft: #FDF1D4;
  --leaf: #5E9B4E;
  --leaf-soft: #E4F0DE;
  --sky: #3E7CB1;
  --sky-soft: #DFECF8;
  --plum: #8B6BB1;
  --plum-soft: #EEE7F7;
  --rose: #D4506E;
  --rose-soft: #FAE1E7;

  /* bands */
  --bronze: #B4763C;
  --bronze-soft: #F5E4D2;
  --silver: #7C8798;
  --silver-soft: #E8ECF1;
  --gold: #C89412;
  --gold-soft: #FBEECB;

  /* semantic */
  --correct: #2E7D5B;
  --correct-soft: #DDF1E6;
  --nudge: #B4763C;
  --nudge-soft: #F9EAD8;

  /* type */
  --font: "PingFang HK", "Noto Sans HK", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.6rem, 6vw, 4.4rem);
  --fs-h1: clamp(1.9rem, 4.2vw, 2.9rem);
  --fs-h2: clamp(1.35rem, 2.6vw, 1.85rem);
  --fs-h3: clamp(1.1rem, 2vw, 1.3rem);
  --fs-body: clamp(1rem, 1.35vw, 1.12rem);
  --fs-small: 0.9rem;
  --fs-tiny: 0.8rem;
  --fs-word: clamp(1.5rem, 3.4vw, 2.1rem);
  --fs-jp: clamp(0.86rem, 1.6vw, 1rem);

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* shape */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* depth */
  --shadow-sm: 0 2px 6px rgba(35, 33, 30, .06);
  --shadow-md: 0 8px 24px rgba(35, 33, 30, .09);
  --shadow-lg: 0 18px 48px rgba(35, 33, 30, .13);

  /* motion */
  --ease: cubic-bezier(.22, .8, .28, 1);
  --fast: 140ms;
  --base: 240ms;
  --slow: 420ms;

  /* layout */
  --page: 1120px;
  --tap: 56px;
  --tap-lg: 88px;
}

/* Category colours — used on cards, slots and the core board. */
[data-cat="food"]     { --cat: var(--coral); --cat-soft: var(--coral-soft); }
[data-cat="animal"]   { --cat: var(--sun);   --cat-soft: var(--sun-soft); }
[data-cat="people"]   { --cat: var(--sky);   --cat-soft: var(--sky-soft); }
[data-cat="body"]     { --cat: var(--rose);  --cat-soft: var(--rose-soft); }
[data-cat="action"]   { --cat: var(--leaf);  --cat-soft: var(--leaf-soft); }
[data-cat="colour"]   { --cat: var(--plum);  --cat-soft: var(--plum-soft); }
[data-cat="object"]   { --cat: var(--rose);  --cat-soft: var(--rose-soft); }
[data-cat="social"]   { --cat: var(--teal);  --cat-soft: var(--teal-soft); }
[data-cat="clothing"] { --cat: var(--plum);  --cat-soft: var(--plum-soft); }
[data-cat="home"]     { --cat: var(--bronze);--cat-soft: var(--bronze-soft); }
[data-cat="vehicle"]  { --cat: var(--sky);   --cat-soft: var(--sky-soft); }
[data-cat="nature"]   { --cat: var(--leaf);  --cat-soft: var(--leaf-soft); }
[data-cat="place"]    { --cat: var(--teal);  --cat-soft: var(--teal-soft); }
[data-cat="feeling"]  { --cat: var(--sun);   --cat-soft: var(--sun-soft); }
[data-cat="quality"]  { --cat: var(--silver);--cat-soft: var(--silver-soft); }
[data-cat="number"]   { --cat: var(--gold);  --cat-soft: var(--gold-soft); }
[data-cat="shape"]    { --cat: var(--plum);  --cat-soft: var(--plum-soft); }
[data-cat="position"] { --cat: var(--silver);--cat-soft: var(--silver-soft); }
[data-cat="school"]   { --cat: var(--sky);   --cat-soft: var(--sky-soft); }
[data-cat="toy"]      { --cat: var(--sun);   --cat-soft: var(--sun-soft); }
[data-cat="festival"] { --cat: var(--coral); --cat-soft: var(--coral-soft); }
[data-cat="time"]     { --cat: var(--plum);  --cat-soft: var(--plum-soft); }
[data-cat="measure"]  { --cat: var(--silver);--cat-soft: var(--silver-soft); }
[data-cat="function"] { --cat: var(--teal);  --cat-soft: var(--teal-soft); }
[data-cat="extension"]{ --cat: var(--ink-soft); --cat-soft: var(--cream-deep); }
[data-cat="core"]     { --cat: var(--teal);  --cat-soft: var(--teal-soft); }

/* ---------- Storybook theme (watercolour paper) ---------- */
body[data-theme="storybook"] {
  --cream: #FBF6EC;
  --cream-deep: #F2E7D5;
  --surface: #FFFDF8;
  --surface-tint: #FFFBF2;

  --ink: #3C352E;
  --ink-soft: #6A5F52;
  --ink-faint: #8A7D6D;

  --teal: #5E7F6E;
  --teal-deep: #466554;
  --teal-soft: #DCEAE0;
  --coral: #C96A5B;
  --coral-soft: #F6DFD9;
  --sun: #E0A94A;
  --sun-soft: #FAEFD5;
  --leaf: #7D9B6A;
  --leaf-soft: #E4EEDC;
  --sky: #7F9FB8;
  --sky-soft: #E1EBF2;
  --plum: #9A8AAE;
  --plum-soft: #EEE8F3;
  --rose: #C98A98;
  --rose-soft: #F6E2E6;

  --bronze: #B4763C;
  --bronze-soft: #F5E4D2;
  --silver: #8A8F94;
  --silver-soft: #ECEEF0;
  --gold: #D9A441;
  --gold-soft: #FAEFD5;

  --correct: #5E7F6E;
  --correct-soft: #DCEAE0;
  --nudge: #B4763C;
  --nudge-soft: #F6E7D4;

  --shadow-sm: 0 2px 7px rgba(75, 58, 46, .08);
  --shadow-md: 0 10px 26px rgba(75, 58, 46, .11);
  --shadow-lg: 0 20px 52px rgba(75, 58, 46, .15);
}

/* ---------- Focus theme (paper-based) ----------
   Cool, high-brightness, high-saturation surfaces with a warm protagonist
   and warm action accents. Approx. cool:warm = 7:3. */
body[data-theme="focus"] {
  --cream: #E8F6FD;
  --cream-deep: #D2ECF8;
  --surface: #FFFFFF;
  --surface-tint: #F4FBFF;

  --ink: #102F45;
  --ink-soft: #3A6078;
  --ink-faint: #5A748A;

  --teal: #0077B6;
  --teal-deep: #005A8C;
  --teal-soft: #D6EFFB;
  --coral: #FF6B35;
  --coral-soft: #FFE2D6;
  --sun: #FFB703;
  --sun-soft: #FFF1CC;
  --leaf: #00A896;
  --leaf-soft: #D6F5F0;
  --sky: #0096C7;
  --sky-soft: #D6F2FC;
  --plum: #7B61FF;
  --plum-soft: #E9E4FF;
  --rose: #EF476F;
  --rose-soft: #FFE0E8;

  --bronze: #B4763C;
  --bronze-soft: #F5E4D2;
  --silver: #5C7C93;
  --silver-soft: #E4EEF5;
  --gold: #FFB703;
  --gold-soft: #FFF1CC;

  --correct: #006B5C;
  --correct-soft: #D6F5EF;
  --nudge: #8A5A2B;
  --nudge-soft: #F9EAD8;

  --shadow-sm: 0 2px 6px rgba(16, 47, 69, .08);
  --shadow-md: 0 8px 24px rgba(16, 47, 69, .11);
  --shadow-lg: 0 18px 48px rgba(16, 47, 69, .16);
}