/* =========================================================
   VARIABLES.CSS
   Design tokens — the single source of truth for the visual
   language of this product. Every color, spacing, radius and
   shadow used anywhere in the app is defined here first.
   ========================================================= */

:root {

  /* ---------- Color: surfaces ---------- */
  --color-bg: #F7F8FA;
  --color-card: #FFFFFF;
  --color-border: #E5E7EB;

  /* ---------- Color: brand ---------- */
  --color-primary: #4F46E5;
  --color-primary-hover: #4338CA;
  --color-primary-active: #3730A3;
  --color-secondary: #7C3AED;

  /* Brand gradient — used sparingly, only on the signature mark
     and the primary button, never as a background wash. */
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  /* ---------- Color: feedback ---------- */
  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-danger: #EF4444;
  --color-danger-bg: #FEF2F2;

  /* ---------- Color: text ---------- */
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-text-faint: #9CA3AF;
  --color-text-on-brand: #FFFFFF;

  /* ---------- Typography ---------- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.8125rem;    /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md: 1.0625rem;    /* 17px */
  --fs-lg: 1.375rem;     /* 22px */
  --fs-xl: 1.75rem;      /* 28px */
  --fs-2xl: 2.25rem;     /* 36px */

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

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-tighter: -0.035em;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.05);
  --shadow-card:
    0 1px 1px rgba(17, 24, 39, 0.02),
    0 8px 24px rgba(17, 24, 39, 0.06),
    0 24px 48px -16px rgba(79, 70, 229, 0.10);
  --shadow-card-hover:
    0 1px 1px rgba(17, 24, 39, 0.02),
    0 12px 32px rgba(17, 24, 39, 0.08),
    0 32px 64px -20px rgba(79, 70, 229, 0.16);
  --shadow-focus: 0 0 0 4px rgba(79, 70, 229, 0.14);
  --shadow-btn: 0 1px 2px rgba(79, 70, 229, 0.06);
  --shadow-btn-hover: 0 8px 20px -6px rgba(79, 70, 229, 0.45);
  --shadow-toast: 0 10px 15px -3px rgba(17, 24, 39, 0.08), 0 4px 6px -4px rgba(17, 24, 39, 0.08);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

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