/* ============================================================
   Lux Light — Spacing, Radii, Borders, Shadows, Motion
   A calm editorial rhythm built on a 4px base unit.
   ============================================================ */

:root {
  /* ---------- Spacing scale (4px base) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* Layout */
  --gutter:        24px;
  --page-margin:   clamp(20px, 6vw, 96px);
  --content-max:   1200px;
  --measure:       66ch;   /* ideal prose width */

  /* ---------- Radii (restrained — editorial, not bubbly) ---------- */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-hair:  1px solid var(--border);
  /* --border-soft and --border-strong are COLOUR tokens (see colors.css). They were
     previously redefined here as self-referential shorthands, which cycled to an empty
     value and made every `1px solid var(--border-strong)` border fall back to currentColor.
     Left to colors.css so those borders render the intended light hairline. */

  /* ---------- Shadows — soft, warm, low-contrast ---------- */
  --shadow-xs:  0 1px 2px oklch(0.4 0.03 70 / 0.06);
  --shadow-sm:  0 1px 3px oklch(0.4 0.03 70 / 0.07), 0 1px 2px oklch(0.4 0.03 70 / 0.05);
  --shadow-md:  0 4px 14px oklch(0.4 0.03 70 / 0.08), 0 2px 5px oklch(0.4 0.03 70 / 0.05);
  --shadow-lg:  0 18px 40px oklch(0.38 0.03 70 / 0.12), 0 6px 14px oklch(0.4 0.03 70 / 0.07);
  --shadow-inset: inset 0 1px 2px oklch(0.4 0.03 70 / 0.06);

  /* Amber glow — for lit / active emphasis only */
  --glow-amber: 0 0 0 1px oklch(0.86 0.11 78 / 0.35), 0 8px 30px oklch(0.82 0.13 78 / 0.30);
  --glow-amber-sm: 0 4px 18px oklch(0.82 0.13 78 / 0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);          /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-normal: 240ms;   /* @kind other */
  --dur-slow:   420ms;   /* @kind other */
}