*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   tokens.css — theme-AGNOSTIC design tokens (spacing, typography, sizing,
   layout, radii, focus, opacity, z-index, motion). These do not change between
   light and dark.

   Color + shadow tokens are theme-specific and live elsewhere:
     - theme-base.css     — canonical registry of every theme token (+ fallbacks)
     - default-dark.css   — the default (dark) theme's values
     - default-light.css  — the light theme's values
   See theme-base.css for the validation contract enforced by core/theme.js.
   ---------------------------------------------------------------------------- */

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

  /* ——— Typography ——— */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-serif: Georgia, "Times New Roman", serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --line-tight: 1.2;
  --line-normal: 1.5;

  /* ——— Size system (control heights) ——— */
  --size-sm: 24px;
  --size-md: 32px;
  --size-lg: 40px;
  --size-sm-text: var(--text-sm);
  --size-md-text: var(--text-md);
  --size-lg-text: var(--text-md);
  --size-sm-pad: var(--space-2);
  --size-md-pad: var(--space-3);
  --size-lg-pad: var(--space-4);

  /* ——— Layout ——— */
  --header-h: 48px;
  --footer-h: 28px;
  --gutter-w: 6px;
  --col-left-w: 260px;
  --col-right-w: 300px;
  --col-min-w: 160px;
  --col-max-w: 560px;

  /* ——— Radii ——— */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ——— Focus + disabled ——— */
  /* --focus-ring references --color-accent, which is resolved per theme at
     use-time, so this stays theme-agnostic. */
  --focus-ring: 0 0 0 2px var(--color-accent);
  --focus-ring-offset: 1px;
  --opacity-disabled: 0.5;

  /* ——— Z-index ——— */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-tooltip: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ——— Motion ——— */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}