/* ============================================================================
   Vectorsolv — Design Tokens
   Source of truth: Figma "Vectorsolve-draft" (file zfUXf590rb6Wi81gE05bUZ)
   Mapped onto MAST v2.4's five variable collections:
   Color · Theme (Color Scheme 1, dark) · Typography · Layout · Components

   Variable naming mirrors MAST's Webflow Variable Collections so the local
   build maps 1:1 onto the Webflow project when pushed (Phase B).
   ============================================================================ */

:root {
  /* ---- Color / Accent ---------------------------------------------------- */
  --color-accent-lightest: #ffd4d4;
  --color-accent-lighter:  #ffb1b3;
  --color-accent-light:    #ff838b;
  --color-accent:          #f43f5e;  /* MAST "primary" */
  --color-accent-dark:     #cc3850;
  --color-accent-darker:   #992f3d;
  --color-accent-darkest:  #68252c;

  /* ---- Color / Neutrals (8 steps) --------------------------------------- */
  --color-white:            #ffffff;
  --color-neutral-lightest: #f1f5f9;
  --color-neutral-lighter:  #cad5e2;
  --color-neutral-light:    #90a1b9;
  --color-neutral:          #62748e;
  --color-neutral-dark:     #314158;
  --color-neutral-darker:   #1d293d;
  --color-neutral-darkest:  #020618;

  /* MAST color-utility aliases (fixed set) → mapped to the Vectorsolv palette.
     The 8-step neutral ramp exceeds MAST's named set; extra steps are exposed
     as custom utilities in mast.css (u-bg-neutral-dark, etc.). */
  --color-primary:   var(--color-accent);
  --color-black:     var(--color-neutral-darkest);
  --color-darkgray:  var(--color-neutral-darker);
  --color-midgray-1: var(--color-neutral);
  --color-midgray-2: var(--color-neutral-light);
  --color-lightgray: var(--color-neutral-lighter);

  /* ---- Theme / Color Scheme 1 (DARK — applied on .page-wrapper) ---------- */
  --theme-background: var(--color-neutral-darkest); /* #020618 */
  --theme-foreground: var(--color-neutral-darker);  /* #1d293d  (cards/surfaces) */
  --theme-border:     var(--color-neutral-dark);    /* #314158 */
  --theme-text:       var(--color-neutral-lightest);/* #f1f5f9 */
  --theme-text-muted: var(--color-neutral-light);   /* #90a1b9 */
  --theme-accent:     var(--color-accent);          /* #f43f5e */

  /* ---- Typography -------------------------------------------------------- */
  --font-primary: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-secondary: "Roboto", system-ui, sans-serif;

  /* Fluid type scale — MAST uses clamp(min, fluid, max).
     max = Figma px (÷16 → rem); min = chosen for mobile (~58–80% of max).
     Larger headings compress more; body sizes stay near 1:1. */
  --fs-display-1: clamp(3.5rem, 1.5rem + 6vw, 6rem);      /* 56 → 96 */
  --fs-display-3: clamp(2.75rem, 1.6rem + 3.5vw, 4rem);   /* 44 → 64 */
  --fs-h1:        clamp(2.5rem, 1.6rem + 2.8vw, 3.5rem);  /* 40 → 56 */
  --fs-h2:        clamp(2rem, 1.4rem + 2vw, 3rem);        /* 32 → 48 */
  --fs-h3:        clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); /* 28 → 40 */
  --fs-h4:        clamp(1.5rem, 1.25rem + 0.8vw, 2rem);   /* 24 → 32 */
  --fs-h5:        1.25rem;                                /* 20 */
  --fs-h6:        1.25rem;                                /* 20 */
  --fs-tagline:   0.875rem;                               /* 14 — eyebrow */
  --fs-text-lg:   1.25rem;                                /* 20 */
  --fs-text-md:   1.125rem;                               /* 18 */
  --fs-text:      1rem;                                   /* 16 */
  --fs-text-sm:   0.875rem;                               /* 14 */

  --lh-tight:   1;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-snug:    1.3;
  --lh-normal:  1.4;
  --lh-relaxed: 1.5;

  --ls-display: -0.01em;  /* -1 @ ~96 */
  --ls-heading: -0.0125em;
  --ls-normal:  0;

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

  /* ---- Layout ------------------------------------------------------------ */
  --padding-global: 4rem;        /* 64 — container side padding (desktop) */
  --section-pad-sm: 3rem;        /* 48 */
  --section-pad-md: 5rem;        /* 80 */
  --section-pad-lg: 7rem;        /* 112 */
  --section-pad:    8rem;        /* MAST default section vertical padding */
  --max-width:      80rem;       /* 1280 content container (1440 - 2*64 padding ≈ 1312) */
  --max-width-large: 48rem;      /* 768 — narrow text measure */

  --gap-main:   1.5rem;          /* default row gap */
  --gap-md:     1rem;
  --gap-sm:     0.5rem;
  --gap-button: 0.75rem;

  /* ---- Components -------------------------------------------------------- */
  --radius-small:  4px;
  --radius-medium: 12px;
  --radius-large:  24px;
  --radius-full:   9999px;

  --stroke-divider: 1px;

  --shadow-small:  0 2px 4px -2px #0000000f, 0 4px 8px -2px #0000001a;
  --shadow-large:  0 8px 8px -4px #00000008, 0 20px 24px -4px #00000014;
  --shadow-xxlarge: 0 32px 64px -12px #00000024;
}