/* ==========================================================================
   VaultedOS — Design Tokens
   Extracted from Figma page "VaultedOS" (file NLBNRgRgm4RlmGHIdA5HpM).
   DO NOT invent new colors, radii, or type sizes. Add to this file instead.
   ========================================================================== */

:root {
  /* ---- Brand core (from Figma) ------------------------------------------ */
  --vos-blue: #50a1f9;          /* primary accent, borders, links, eyebrows  */
  --vos-mint: #8be3ca;          /* secondary accent, gradient terminus       */
  --vos-gold: #ffc300;          /* "See How It Works" wave, premium accents  */

  --vos-blue-navy: #2e4c77;     /* logo gradient top                         */
  --vos-blue-mid: #468bd9;      /* logo gradient mid                         */
  --vos-blue-sky: #4f9ff6;      /* logo gradient bottom                      */

  /* Bright "all-clear" green. Distinct from --vos-mint (#8be3ca) — five
     sections reached for this independently, so it is a real brand value. */
  --vos-mint-bright: #5ffcc0;
  --vos-navy-deep: #244068;     /* navy body text on light panels            */
  --vos-halo: #bdf8ff;          /* pale cyan halo on the lifted panel        */

  /* Blue that passes AA on light surfaces. --vos-blue is 2.7:1 on #fff and must
     never be text on a light band.
     Darkened from #1f6fd0, which was only 4.95:1 on PURE white — any tint on the
     band (a wash, a texture, a decorative image passing behind) pushed it under
     AA, and a section had to lighten its own artwork to claw the margin back.
     #1a5cb0 measures 6.56:1 on #fff and still 6.10:1 on a tinted band. */
  --vos-blue-ink: #1a5cb0;

  /* The signature gradient. Used on eyebrow text, hero emphasis, rules. */
  --vos-grad: linear-gradient(90deg, var(--vos-blue) 0%, var(--vos-mint) 100%);
  --vos-grad-soft: linear-gradient(90deg, rgba(80,161,249,.10) 0%, rgba(139,227,202,.10) 100%);
  /* Hero variant: holds solid blue to 53.4% before ramping to mint. */
  --vos-grad-late: linear-gradient(90deg, var(--vos-blue) 53.4%, var(--vos-mint) 100%);
  --vos-grad-hairline: linear-gradient(90deg, transparent, rgba(80,161,249,.55), rgba(139,227,202,.55), transparent);

  /* ---- Dark surfaces (default theme) ----------------------------------- */
  --bg-deep: #05080f;           /* page base                                 */
  --bg-deep-2: #070d18;         /* alternate dark band                       */
  --bg-panel: rgba(255, 255, 255, .04);
  --bg-panel-2: rgba(255, 255, 255, .06);
  --bg-inset: rgba(0, 0, 0, .30);

  --stroke: rgba(255, 255, 255, .08);
  --stroke-strong: rgba(255, 255, 255, .14);
  --stroke-blue: rgba(80, 161, 249, .55);

  --text: #ffffff;
  --text-strong: rgba(255, 255, 255, .80);  /* card/tile body copy          */
  --text-muted: rgba(255, 255, 255, .62);
  --text-dim: rgba(255, 255, 255, .40);

  /* ---- Light surfaces (comparison / story bands) ------------------------ */
  --lt-bg: #ffffff;
  --lt-bg-wash: radial-gradient(120% 80% at 12% 0%, #eaf4ff 0%, transparent 55%),
                radial-gradient(120% 90% at 92% 12%, #fdf0f6 0%, transparent 52%),
                radial-gradient(110% 80% at 78% 96%, #e8fbf4 0%, transparent 55%),
                #ffffff;
  --lt-panel: #ffffff;
  --lt-stroke: rgba(11, 18, 32, .10);
  --lt-text: #0b1220;
  --lt-text-muted: #5b6472;
  --lt-text-dim: #8a92a0;
  --lt-glass: rgba(255, 255, 255, .65);        /* glass surface on light    */
  --lt-track: #cccccc;                         /* meter / progress track    */
  --lt-rule-navy: rgba(36, 64, 104, .18);      /* navy-tinted light hairline*/

  /* Semantic status. Shared by the product-UI panels. */
  --vos-danger: #ff4545;
  --vos-success: #00d492;

  /* ---- Type ------------------------------------------------------------- */
  --font: 'Poppins', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

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

  /* Fluid scale. Desktop values match Figma @1440.
     NOTE: --fs-h2 is 40px/700 because that is what Figma actually uses for a
     SECTION heading (testimonials, statements, FAQ, comparison all measure 40
     Bold). The 32px found in receipts/reports is a FEATURE-ROW heading, a
     separate level — that is --fs-feature. Collapsing the two was a mistake. */
  /* The vw term of each clamp is calibrated so the value lands EXACTLY on its
     Figma size at the 1440 reference width (size ÷ 1440). Three agents
     independently measured the old terms undershooting — --fs-eyebrow was
     resolving to 17.28px and only reaching 18px at a 1500px viewport. */
  --fs-display: clamp(2.25rem, 5.28vw, 4.75rem); /* 76px hero line 2        */
  --fs-h1: clamp(1.875rem, 3.06vw, 2.75rem);     /* 44px hero line 1        */
  --fs-h2: clamp(1.75rem, 2.78vw, 2.5rem);       /* 40px section headings   */
  --fs-feature: clamp(1.5rem, 2.23vw, 2rem);     /* 32px feature-row heads  */
  --fs-title: clamp(1.25rem, 1.67vw, 1.5rem);    /* 24px card titles        */
  --fs-h3: clamp(1.125rem, 1.39vw, 1.25rem);     /* 20px small card titles  */
  --fs-lead: clamp(1rem, 1.39vw, 1.25rem);       /* 20px section sub-copy   */
  --fs-eyebrow: clamp(1rem, 1.25vw, 1.125rem);   /* 18px eyebrow labels     */
  --fs-body: 1rem;                               /* 16px                    */
  --fs-sm: .875rem;                              /* 14px  buttons, labels   */
  --fs-xs: .75rem;                               /* 12px  micro-labels      */

  --lh-tight: 1.1;                               /* headings (Figma)        */
  --lh-lead: 1.3;                                /* display-adjacent sub    */
  --lh-body: 1.6;
  --lh-ui: 1.4286;                               /* 20/14 from Figma        */

  /* Figma applies NO tracking to its eyebrows — three sections measured their
     eyebrow ~22% too wide against the design before this was zeroed. The old
     .08em was a house invention, not a value from the file. */
  --ls-eyebrow: 0;
  --ls-label: .14em;

  /* ---- Spacing (Figma spacing scale) ----------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---- Geometry --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;                  /* buttons — exact Figma value             */
  --r-card: 14px;                /* story/feature cards — exact Figma value */
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 9999px;

  --h-control: 44px;             /* height/h-11 from Figma                  */

  /* Page frame: Figma nav is x=104 in a 1440 frame → 1232 content width. */
  --container: 1232px;
  --gutter: clamp(20px, 5vw, 104px);

  /* ---- Effects ---------------------------------------------------------- */
  --glow-blue: 0 0 0 1px rgba(80,161,249,.35), 0 0 28px rgba(80,161,249,.28);
  --glow-blue-lg: 0 0 40px rgba(80,161,249,.35), 0 0 90px rgba(80,161,249,.18);
  --shadow-btn: 0 4px 25.8px rgba(0, 0, 0, .5);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, .45);
  --shadow-card-lt: 0 18px 48px rgba(11, 18, 32, .10);

  --blur-glass: 12px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 240ms;
}

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