/* AiFlo design tokens — extracted from Figma file ImOf63kXNoifX83H0tCc0m */
:root {
  /* Brand colors — single accent: #4D00F2 with computed tints/shades */
  --color-primary: #4D00F2;            /* Canary — primary CTA / accent */
  --color-primary-hover: #3a00bf;
  --color-primary-dark: #2a0085;
  --color-primary-deeper: #1c0058;     /* dark-purple-navy for sections like CTA */
  --color-primary-mid: #6f2dff;        /* mid lighter for gradient stops */
  --color-primary-light: #a47cff;      /* light tint for highlights on dark bg */
  --color-primary-tint-1: #f5efff;     /* very light wash (5%) */
  --color-primary-tint-2: #e9defe;     /* light tint */
  --color-primary-tint-3: #d4bdfd;     /* mid tint */

  /* RGB triple for opacity-based usage (rgb(var(--color-primary-rgb) / .12)) */
  --color-primary-rgb: 77 0 242;

  /* legacy alias kept for partials still referencing it */
  --color-primary-soft: var(--color-primary-tint-1);

  /* Text */
  --color-text: #242426;           /* Shark — headings */
  --color-text-mid: #35363B;       /* Tuna */
  --color-text-thunder: #231F20;
  --color-text-muted: rgba(36,36,38,0.75);
  --color-text-meta: #6f767e;
  --color-text-faint: #9ca3af;

  /* Surfaces */
  --color-bg: #FFFFFF;
  --color-bg-soft: #EBEFF5;        /* Catskill White (hero) */
  --color-bg-secondary: #f8fafc;
  --color-card: #FFFFFF;
  --color-border: #efefef;
  --color-border-strong: #e5e7eb;
  --color-border-dashed: #babae7;

  /* Status */
  --color-success: #16A34A;
  --color-success-bg: #F0FDF4;
  --color-success-border: #BBF7D0;

  /* WhatsApp UI (phone mockup) */
  --wa-green: #075E54;
  --wa-bubble-out: #DCF8C6;
  --wa-bubble-in: #FFFFFF;
  --wa-bg: #ECE5DD;
  --wa-send: #25D366;
  --wa-meta: #667781;
  --wa-online: #4ADE80;

  /* Dashboard */
  --dash-text: #1a1d1f;
  --dash-muted: #6f767e;
  --dash-meta: #9ca3af;
  --dash-grid: #e5e7eb;

  /* Card variants */
  --badge-blue: var(--color-primary-tint-2);
  --badge-violet: var(--color-primary-tint-2);
  --accent-lime: #d4e29e;

  /* Workflow distribution palette */
  --wf-1: #8e8eb3;
  --wf-2: #8bb4ff;
  --wf-3: #759e9e;
  --wf-4: #a3b16f;
  --wf-5: #b3725f;

  /* Typography — Nunito for headings (per design spec), Geist for UI/body */
  --font-display: 'Nunito', 'Geist', 'Onest', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Geist', 'Onest', 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:      'Geist', 'Onest', 'Manrope', system-ui, sans-serif;
  --font-chat:    'Roboto', system-ui, sans-serif;

  /* Type scale (matches Figma) */
  --fs-h1: clamp(40px, 4.5vw + 1rem, 64px);
  --fs-h2: clamp(32px, 3vw + 1rem, 48px);
  --fs-h3: clamp(24px, 2vw + 0.5rem, 32px);
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --lh-relaxed: 1.6;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-3xl: 29px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.08);
  --shadow-xl: 0 24px 60px -20px rgba(36,36,38,0.18);
  --shadow-card: 0 1px 1px rgba(0,0,0,0.05);

  /* Layout */
  --container-max: 1200px;
  --container-px: clamp(20px, 4vw, 64px);
  --section-py: clamp(72px, 8vw, 120px);

  /* Section heading rhythm — sized for comfortable two-line wraps with
     `text-wrap: balance` so phrases don't get orphaned across lines. */
  --fs-section-h2: clamp(28px, 3.4vw, 46px);
  --fs-section-lede: clamp(15px, 1vw, 17px);
  --lh-section-lede: 1.55;
  --gap-head-body: clamp(36px, 4.2vw, 52px);

  /* Eyebrow chip system (every section starts with one of these) */
  --eyebrow-fs: 12px;
  --eyebrow-ls: 0.14em;
  --eyebrow-fw: 700;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 400ms;
}