/* Luma Learn — foundation tokens.
   Hue-independent: every app reads these names; each app's theme file
   (design/themes/<app>.css) supplies the color values. Apps consume the
   vendored copies in <app>/design/ — run `node tools/sync-design.js`
   after editing anything here.

   Required color slots every theme MUST define:
     --bg --surface --ink --muted --line
     --accent --accent-deep --accent-soft
     --good --shadow-tint (R,G,B of the shadow's ink)                 */

:root {
  /* radius scale (speelplank's granularity + woordjes' hero radius) */
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* elevation — tinted by each theme's ink so shadows stay warm */
  --sh-1: 0 1px 2px rgba(var(--shadow-tint), 0.05),
          0 8px 24px -12px rgba(var(--shadow-tint), 0.18);
  --sh-2: 0 16px 44px rgba(var(--shadow-tint), 0.10);

  /* type roles — rounded display over the system stack, everywhere */
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* motion — the family's signature easings and tempos */
  --ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);
  --dur-pop: 0.45s;
  --dur-breathe: 3.2s;

  /* touch — a toddler's fingers and a parent's discreet corners */
  --tap-min: 44px;
  --tap-child: 62px;
}