/* ==========================================================================
   variables.css
   Design tokens — the single source of truth for the visual system.
   Typography, color palette, spacing, radii, and shadows all live here.
   ========================================================================== */

:root {

  /* ---------------------------- Color Palette ---------------------------- */
  --color-bg: #F7F8FA;
  --color-card: #FFFFFF;
  --color-primary: #4F46E5;
  --color-secondary: #7C3AED;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-success: #22C55E;
  --color-code-bg: #F9FAFB;

  /* ------------------------------ Typography ------------------------------ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;

  --fs-nav: 14px;
  --fs-body: 14.5px;
  --fs-small: 13px;
  --fs-subtitle: 15px;
  --fs-heading: 28px;
  --fs-code: 13px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --ls-tight: -0.03em;
  --ls-snug: -0.01em;

  /* -------------------------------- Spacing -------------------------------- */
  --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;

  /* ----------------------------- Border Radius ------------------------------ */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* -------------------------------- Shadows --------------------------------- */
  --shadow-header: 0 1px 0 rgba(17, 24, 39, 0.05);
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 20px 40px -12px rgba(17, 24, 39, 0.10);
  --shadow-card-hover: 0 1px 2px rgba(17, 24, 39, 0.05), 0 28px 56px -14px rgba(17, 24, 39, 0.14);
  --shadow-preview: 0 1px 1px rgba(17, 24, 39, 0.04), 0 24px 40px -16px rgba(17, 24, 39, 0.28);
  --shadow-btn-primary: 0 1px 2px rgba(17, 24, 39, 0.06), 0 8px 16px -6px rgba(79, 70, 229, 0.25);
  --shadow-btn-primary-hover: 0 4px 8px rgba(17, 24, 39, 0.06), 0 14px 26px -8px rgba(79, 70, 229, 0.38);
  --shadow-btn-secondary: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 10px -4px rgba(17, 24, 39, 0.10);
  --shadow-toast: 0 10px 30px -8px rgba(17, 24, 39, 0.4);

  /* -------------------------------- Motion ---------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.4s;
  --duration-gradient: 0.6s;

  /* -------------------------------- Layout ----------------------------------- */
  --max-width-card: 520px;
  --max-width-page: 1120px;
  --header-height: 72px;
}