/* Hallmark · component: speech controls + type scale · macrostructure: Split Studio (preserved)
 * genre: playful-soft · theme: Quiet/teal · contrast: pass (46–50)
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P4 H5 E5 S5 R5 V4
 * anchor: oklch(54% 0.096 170) — brand teal preserved from #1a736a
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap');

:root {
  /* ── Colour ──────────────────────────────────────────────────────── */
  --color-paper:      oklch(97.5% 0.003 170);   /* barely tinted white */
  --color-paper-2:    oklch(95.0% 0.005 170);   /* panel heads, textarea */
  --color-paper-3:    oklch(92.5% 0.007 170);   /* hover states */
  --color-rule:       oklch(88.0% 0.006 170);   /* hairline dividers    */
  --color-muted:      oklch(53.0% 0.006 170);   /* secondary labels     */
  --color-ink:        oklch(16.0% 0.010 170);   /* primary text         */
  --color-ink-2:      oklch(36.0% 0.008 170);   /* secondary text       */
  --color-accent:     oklch(53.0% 0.096 170);   /* brand teal           */
  --color-accent-dim: oklch(46.0% 0.096 170);   /* accent hover         */
  --color-accent-ink: oklch(97.5% 0.003 170);   /* text on accent bg    */
  --color-accent-soft:oklch(93.0% 0.025 170);   /* friendly control bg  */
  --color-focus:      oklch(53.0% 0.096 170);   /* focus ring           */
  --color-error-bg:   oklch(97.0% 0.010  25);   /* error pill bg        */
  --color-error-ink:  oklch(42.0% 0.150  25);   /* error text           */
  --color-error-rule: oklch(86.0% 0.040  25);   /* error border         */

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-ui:      "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-content: "Geist", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* ── Larger teaching-interface type scale ──────────────────────── */
  --text-xs:   0.875rem;   /* 14 px */
  --text-sm:   1.00rem;    /* 16 px */
  --text-base: 1.125rem;   /* 18 px */
  --text-md:   1.375rem;   /* 22 px */
  --text-lg:   1.75rem;    /* 28 px */
  --text-xl:   2.125rem;   /* 34 px */

  /* ── Spacing (4pt scale) ─────────────────────────────────────────── */
  --space-3xs: 0.125rem;   /*  2 px */
  --space-2xs: 0.25rem;    /*  4 px */
  --space-xs:  0.5rem;     /*  8 px */
  --space-sm:  0.75rem;    /* 12 px */
  --space-md:  1rem;       /* 16 px */
  --space-lg:  1.5rem;     /* 24 px */
  --space-xl:  2.5rem;     /* 40 px */
  --space-2xl: 4rem;       /* 64 px */

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-short:   180ms;
  --dur-mid:     320ms;
  --dur-micro:   100ms;

  /* ── Z-index scale ───────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-tooltip: 600;
}