/* ════════════════════════════════════════════════════════════════════
   Paravent — Design tokens (theme-independent scales)
   ────────────────────────────────────────────────────────────────────
   Non-color design primitives shared by every theme: spacing, radius,
   type scale, elevation, motion and touch tokens. Loaded BEFORE the
   theme stylesheet so themes (color only) and components can reference
   these names. See DESIGN.md §4 for the rationale.

   Colors do NOT live here — they live exclusively in theme-*.css.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Radius scale ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  /* Back-compat: existing components read --radius. Map it to the medium step
     so legacy rules pick up the new system automatically. */
  --radius: var(--radius-md);

  /* ── Type scale (mobile-first; 12px floor) ── */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.375rem; /* 22px */
  --text-2xl: 1.75rem; /* 28px */
  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* ── Font roles (families only; faces are declared in app.css) ── */
  --font-ui: "Scaly Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --font-read: "Bookinsanity", "Palatino Linotype", Palatino, Georgia, serif;
  --font-display: "Nodesto Caps Condensed", "Mr Eaves Small Caps", serif;

  /* ── Elevation ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.2);

  /* ── Motion ── */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Touch & layout primitives ── */
  --tap-min: 44px;
}

/* ── Reduced motion: collapse all animation/transition (DESIGN.md §4.5) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Shared focus-visible ring for every interactive element (DESIGN.md F10).
   Uses the theme's --ring; falls back gracefully if a theme omits it. ── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--ring, #888) 32%, transparent);
  border-radius: var(--radius-sm);
}