/* ============================================================
   ZEROTUDE — Spacing, corners & elevation
   4px base grid · rounded corners (default) · soft low-contrast shadows.
   ============================================================ */

:root {
  /* ---------- Spacing — 4px base grid ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- Corners — ROUNDED (v2.1 default) ----------
     Soft rounding is now the default across inputs, buttons, cards,
     chips and badges. Components reference these tokens, so this
     rounds the whole system at once. Sharp corners are OPT-IN via
     :root[data-corners="squared"] (see below) — the old "square
     everything except a mock frame" rule no longer applies as default.
     Mock frames still keep their own larger radius (.z-mock, 14px). */
  --r-xs:   6px;   /* @kind radius */
  --r-sm:   9px;   /* @kind radius */
  --r-md:   12px;  /* @kind radius */
  --r-lg:   16px;  /* @kind radius */
  --r-xl:   22px;  /* @kind radius */
  --r-pill: 999px; /* @kind radius */

  /* ---------- Elevation — soft, low-contrast, never colored ----------
     Many cards use a hairline border INSTEAD of a shadow (flat Swiss
     surfaces). Use elevation sparingly. */
  --shadow-sm: 0 1px 2px rgba(15,14,14,0.06), 0 1px 1px rgba(15,14,14,0.04);
  --shadow-md: 0 4px 16px rgba(15,14,14,0.06), 0 1px 3px rgba(15,14,14,0.05);
  --shadow-lg: 0 18px 48px rgba(15,14,14,0.10), 0 4px 12px rgba(15,14,14,0.06);

  /* ---------- Motion — restrained & precise ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 180ms; /* @kind other */
  --dur:      240ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ---------- Sharp corners — OPT-IN ----------
   Squared corners are the load-bearing Swiss feel where wanted; set
   data-corners="squared" on <html> (or any subtree root) to bring them
   back for that scope. */
:root[data-corners="squared"] {
  --r-xs:   0; /* @kind radius */
  --r-sm:   0; /* @kind radius */
  --r-md:   0; /* @kind radius */
  --r-lg:   0; /* @kind radius */
  --r-xl:   0; /* @kind radius */
  --r-pill: 0; /* @kind radius */
}

/* Dark mode swaps shadows for deeper, neutral blacks */
:root[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
}