/* ============================================================
 * File: css/variables.css
 * Module: Design Tokens (structure only — no colors here)
 * Purpose: Spacing, radius, typography scale, motion, z-index,
 *          layout sizes. Colors live in themes.css.
 * Note: :root holds tokens that never change between themes.
 * ============================================================ */

:root {
  /* ---------- Font families ---------- */
  --font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  /* ---------- Font sizes (scale for the app window) ---------- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  /* ---------- Font weights ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- Line heights ---------- */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ---------- Letter spacing ---------- */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-caps: 0.06em;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* ---------- Borders ---------- */
  --border-thin: 1px;
  --border-thick: 2px;

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---------- Layout sizes ---------- */
  --app-min-width:  360px;
  --app-min-height: 400px;
  --header-height:  56px;
  --nav-height:     46px;
  --sidebar-width:  248px;
  --sidebar-collapsed: 68px;

  /* ---------- Component sizes ---------- */
  --control-height-sm: 28px;
  --control-height-md: 34px;
  --control-height-lg: 40px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
}