/* Vidia — spacing, radius, elevation, motion */

:root, [data-theme="light"] {
  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --page-margin: 24px;        /* screen edge gutter */
  --stack-gap: 20px;          /* default gap between stacked lesson components */

  /* ---- Radius ----
     ONE radius everywhere (cards, inputs, wells, media, icon tiles) + the pill
     + the sheet's top corners. Aliases resolve to --radius-base. */
  --radius-base: 20px;
  --radius-card: var(--radius-base);
  --radius-card-lg: var(--radius-base);
  --radius-input: var(--radius-base);
  --radius-thumb: var(--radius-base);
  --radius-media: var(--radius-base);
  --radius-sheet: 28px;       /* bottom-sheet top corners (verdict, switcher) */
  --radius-chip: 999px;       /* pills & chips — a shape, not a radius */

  /* ---- Elevation ----
     Light: broad, soft, warm-neutral shadows. Never hard or blue.
     Glass-tier shadows (frost/glass/vault) live in tokens/glass.css. */
  --shadow-card: 0 1px 2px rgba(26,25,23,0.04), 0 8px 24px rgba(26,25,23,0.05);
  --shadow-float: 0 2px 6px rgba(26,25,23,0.07), 0 12px 32px rgba(26,25,23,0.10);
  --shadow-sheet: 0 -8px 40px rgba(26,25,23,0.12);
  --shadow-halo: 0 0 0 6px var(--paper-1); /* paper ring around floating circles */

  /* ---- Hit targets ---- */
  --hit-min: 44px;
  --control-h: 51px;          /* primary buttons, matched to Paper */
  --circle-control: 56px;     /* floating circular buttons */

  /* ---- Motion ----
     Mirrors the app (tailwind duration-* + theme/motion.ts). State-driven
     feedback transitions use press/fast; entrances in RN are springs
     parameterized as Apple (dampingRatio, response) pairs:
     chill 1.0/0.4 · gentle 1.0/0.5 · snappy 1.0/0.3 · sheet 0.9/0.35.
     On the web, approximate springs with --ease-spring. */
  /* the house curve */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  /* legacy alias */
  --ease-out: var(--ease-standard); /* @kind other */
  --ease-in: cubic-bezier(0.55, 0, 0.8, 0.4);      /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1); /* @kind other */
  --dur-press: 120ms;         /* press feedback ease-back @kind other */
  --dur-fast: 180ms;          /* @kind other */
  --dur-base: 260ms;          /* @kind other */
  --dur-slow: 420ms;          /* @kind other */
  --dur-reveal: 640ms;        /* streaming content appearance @kind other */
}

/* Dark: shadows barely read on dark paper — elevation comes from a lifted
   surface + a faint light rim, with deeper shadows underneath. */
[data-theme="dark"] {
  --shadow-card: 0 0 0 1px rgba(242,240,236,0.07), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-float: 0 0 0 1px rgba(242,240,236,0.09), 0 2px 6px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.5);
  --shadow-sheet: 0 0 0 1px rgba(242,240,236,0.08), 0 -8px 40px rgba(0,0,0,0.55);
  --shadow-halo: 0 0 0 6px var(--paper-1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;  /* @kind other */
    --dur-fast: 0ms;   /* @kind other */
    --dur-base: 0ms;   /* @kind other */
    --dur-slow: 0ms;   /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
  }
}