/* ============================================================
   CanBake · "Thai Tea" — Spacing, radius, elevation, motion, icons
   ============================================================ */

:root {
  /* ---- Spacing (airier than legacy) ---- */
  --space-0:   0px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;   /* card padding */
  --space-xl:  20px;   /* screen horizontal padding */
  --space-2xl: 24px;   /* section gap */
  --space-3xl: 32px;
  --space-4xl: 48px;   /* empty-state breathing room */

  /* ---- Radius ---- */
  --radius-sm:    8px;
  --radius-md:    12px;  /* chips / badges */
  --radius-input: 14px;  /* inputs */
  --radius-lg:    16px;  /* buttons / menus */
  --radius-card:  20px;  /* cards (softer, modern) */
  --radius-xl:    24px;  /* sheets */
  --radius-pill:  999px;

  /* ---- Elevation (soft; dark prefers borders) ---- */
  --elev-0: none;
  --elev-1: 0 2px 8px  rgba(var(--shadow-ink), 0.06);
  --elev-2: 0 6px 12px rgba(var(--shadow-ink), 0.12);
  --elev-3: 0 12px 24px rgba(var(--shadow-ink), 0.18);

  /* ---- Motion ---- */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --press-opacity: 0.8; /* @kind other */
  --press-scale: 0.98; /* @kind other */

  /* ---- Icon sizes ---- */
  --icon-inline:  16px;
  --icon-default: 20px;
  --icon-nav:     24px;
  --icon-fab:     28px;
  --icon-empty:   32px;

  /* ---- Min touch target ---- */
  --target-min: 44px;
}

/* Reduced motion: durations collapse, scale press disabled */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; /* @kind other */
    --duration-base: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */
    --press-scale: 1; /* @kind other */
  }
}