/* ==========================================================================
   Solvyn — Design Tokens
   Source: Figma file s12rWq186fkCc4A9GS7k3x (SOLVYN LANDING PAGE)
   Extracted directly from Figma variables + the "Intro" (343:12327),
   "Intro - Opener" (343:12273) and "Home" (421:173) nodes. No invented values.
   ========================================================================== */

:root {
  /* ---- Brand — Purple ---- */
  --purple-50:  #ddcef8;
  --purple-400: #7d5eb7;
  --purple-500: #3d138c;
  --purple-800: #12062a;

  /* ---- Neutral — Slate ---- */
  --slate-50:  #f8fafc;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* ---- Accent — Orange (used for "Why We Exist" + Testimonials) ---- */
  --orange-300: #ffc8b3;
  --orange-500: #ff7542;
  --orange-700: #a34928;
  --orange-900: #471d0d;
  --orange-950: #190700;

  /* ---- Accent — Blue (used for "How We Work" + FAQ) ---- */
  --blue-200:  #bfdbfe;
  --blue-500:  #3b82f6;
  --blue-700:  #1d4ed8;
  --blue-950:  #172554;

  /* ---- Base ---- */
  --white: #ffffff;
  --black: #000000;

  /* Only appears on the dark Intro/Opener screens (nav timestamp, service list, email link) */
  --violet-200: #d6d2fd;

  /* ---- Surface backgrounds ---- */
  --bg-canvas: #f0f0f0;  /* outer viewport background once landed on Home */
  --bg-panel:  #f5f5f5;  /* the big rounded content column (814px) that holds the page */
  --bg-intro:  var(--purple-800); /* dark Intro / Opener screen background */

  /* Process-card tints ("How We Work" — each card is one flat tint + a matching border-dot color) */
  --tint-blue:   #e6eaf1;
  --tint-orange: #f1ebe6;
  --tint-purple: #e8e6f1;

  /* ---- Spacing (Figma variables: gap-2/3/4/8, Padding/p-5) ---- */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-8: 32px;
  --padding-p5: 20px;

  /* ---- Named layout gaps (hero stack, confirmed via Figma + user reference
     screenshot) — use these instead of re-measuring one-off pixel values
     each time a new section reuses the same rhythm ---- */
  --gap-hero-headline-to-buttons: 23px; /* headline block -> CTA row (Figma-authored flex gap) */
  --gap-button-row: 12px;               /* between the two pill buttons */
  --gap-button-icon-label: 4px;         /* icon -> label inside one button */
  --button-padding: 12px 16px 12px 12px; /* top/right/bottom/left, pill button */
  /* NOTE: did not add a "buttons -> panel below" token — that whitespace is
     incidental (derived from stacking two absolutely-positioned blocks at
     their own Figma top-offsets), not an authored gap value. Don't invent
     one; measure live in-browser if a future section needs to match it. */

  /* ---- Radii ---- */
  --radius-pill:     100px;   /* buttons, video control pill, ticker dots */
  --radius-card:     25.179px; /* process cards, testimonial inner panel */
  --radius-avatar:   9px;
  --radius-chip:     8px;     /* social icon chips */
  --radius-panel:    40px;    /* image banners, video frame, opener panel (early state) */
  --radius-panel-lg: 50px;    /* the full-height Home content column */
  --radius-testimonial: 32px; /* testimonial outer white card */

  /* ---- Shadows ---- */
  --shadow-button:      0px 13px 16px 0px rgba(178, 187, 200, 0.11);
  --shadow-chip:        0px 2px 8px 0px rgba(190, 190, 190, 0.25);
  --shadow-video-pill:  0px 4px 41.4px 0px rgba(209, 198, 198, 0.25);
  --shadow-footer-logo: 0px 2px 25px 0px rgba(190, 190, 190, 0.25);

  /* ---- Type families ----
     Inter Display is the primary UI face across Home/Opener (nav, headings, body,
     buttons, cards, FAQ, stats, marquee). DM Sans appears ONLY on the dark
     Intro screen's service list + "EMAIL SOLVYN" link — keep it scoped there,
     don't substitute Inter in for it. */
  --font-display: "Inter", sans-serif;
  --font-label:   "DM Sans", sans-serif;

  /* ---- Type scale actually used in the file (px) ---- */
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-24: 24px;
  --text-28: 28px;
  --text-32: 32px;
  --text-64: 64px;  /* marquee ticker */
  --text-190: 190px; /* footer SOLVYN wordmark */
  --text-200: 200px; /* Intro SOLVYN wordmark */

  /* ---- Type scale (desktop / tablet <=1024 / mobile <=640) ----
     Sizes are px / line-height px. H1 was cut down from Align UI's 56/64
     landing title to 40/48 after review — it read as too big in the
     814px content column. */
  --h1-size: 32px; --h1-line: 40px; --h1-track: -0.5px;
  --h1-size-tablet: 28px; --h1-line-tablet: 36px;
  --h1-size-mobile: 24px; --h1-line-mobile: 30px;
  --h2-size: 32px; --h2-line: 40px;
  --h3-size: 24px; --h3-line: 32px;
  --h4-size: 20px; --h4-line: 28px;
  --h5-size: 18px; --h5-line: 24px;
  --h6-size: 16px; --h6-line: 24px;
  --body-size: 16px; --body-line: 24px;
  --small-size: 14px; --small-line: 20px;
  --xs-size: 12px; --xs-line: 16px;

  /* ---- Spacing scale (4px grid, Align UI style). Use these for every gap,
     padding and margin; --space-2/3/4/8 above are the original Figma names. ---- */
  --space-1: 4px;
  --space-5: 20px;
  --space-6: 24px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --card-gap: var(--space-3); /* every card grid uses the same 12px gap, rows AND columns */
}