/* ==========================================================================
   Mercatto — Design tokens
   Single source of truth for color, type, spacing, radius and elevation.
   Never hardcode a raw value in main.css; add a token here instead.
   ========================================================================== */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --brand-50:  #F5F2FF;
  --brand-100: #EBE4FE;
  --brand-200: #D8CCFD;
  --brand-300: #BCA5FA;
  --brand-400: #9B78F6;
  --brand-500: #7C4DF2;
  --brand-600: #6C34EC;   /* primary action */
  --brand-700: #5824C7;
  --brand-800: #451D9C;
  --brand-gradient: linear-gradient(135deg, #7C4DF2 0%, #B94BE0 100%);

  /* ── Neutrals ──────────────────────────────────────────────────────── */
  --ink-900: #0E0A18;     /* header / footer background */
  --ink-800: #171227;
  --ink-700: #241C3B;

  --text-1: #14121C;      /* headings, primary copy */
  --text-2: #56526B;      /* body, secondary copy */
  --text-3: #8B8799;      /* captions, meta */
  --text-inverse: #FFFFFF;
  --text-inverse-2: rgba(255, 255, 255, 0.68);

  --surface-1: #FFFFFF;
  --surface-2: #F8F7FC;   /* section background */
  --surface-3: #F1EFF8;   /* subtle fills */

  --border-1: rgba(20, 18, 28, 0.09);
  --border-2: rgba(20, 18, 28, 0.06);
  --border-inverse: rgba(255, 255, 255, 0.14);

  /* ── Accents (category tints & stat tiles) ─────────────────────────── */
  --accent-violet-bg: #EFE9FE;  --accent-violet-fg: #6C34EC;
  --accent-blue-bg:   #E2EDFE;  --accent-blue-fg:   #2E6FE0;
  --accent-green-bg:  #DCF5EA;  --accent-green-fg:  #12A06E;
  --accent-pink-bg:   #FCE5F1;  --accent-pink-fg:   #D3468E;
  --accent-amber-bg:  #FDEED6;  --accent-amber-fg:  #C97A0B;
  --accent-teal-bg:   #D9F1F3;  --accent-teal-fg:   #12838F;
  --accent-slate-bg:  #ECEBF1;  --accent-slate-fg:  #56526B;

  --success: #12A06E;
  --warning: #C97A0B;
  --danger:  #DC2A45;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-display: clamp(2.25rem, 1.25rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  --fs-h3: clamp(1.125rem, 1.02rem + 0.35vw, 1.375rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-normal: 1.6;

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

  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --container-max: 1240px;
  --container-gutter: clamp(1rem, 0.4rem + 2vw, 2rem);

  /* ── Radius ────────────────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(20, 18, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 18, 28, 0.07), 0 1px 2px rgba(20, 18, 28, 0.04);
  --shadow-md: 0 6px 20px rgba(20, 18, 28, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 18, 28, 0.12);
  --shadow-brand: 0 10px 26px rgba(108, 52, 236, 0.28);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  /* ── Layers ────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}