/* ============================================================
   LARSOON — Design tokens (colors · typography · spacing)
   Source: larsoon-design-system (claude.ai/design) — do not edit
   values here without updating the design system.
   ============================================================ */

:root{
  /* ---- Brand accent ---- */
  --cyan:#00CEF1;          /* primary brand accent — fills, large display on dark, borders, accents. NOT text on white */
  --cyan-bright:#25E3FF;   /* hover / light end of gradient */
  --azure:#18B4E6;         /* secondary accent / gradient partner */
  --cyan-600:#0490B0;      /* UI accent on light (icons, small marks) */
  --cyan-800:#036884;      /* accessible cyan TEXT/links on white (passes AA) */
  --cyan-tint:#E8FBFE;     /* faint cyan fill (icon chips, callouts) */
  --cyan-tint-2:#D4F6FC;   /* deeper faint cyan fill */
  --on-cyan:#04232C;       /* dark text to place on a cyan fill */
  --grad:linear-gradient(118deg, #25E3FF 0%, #00CEF1 45%, #18A6E6 100%);

  /* ---- Dark surfaces (ink) ---- */
  --midnight:#0B141C;      /* primary dark surface — hero, footer, signature CTA */
  --footer:#070D13;        /* very dark footer surface */
  --slate-900:#0F1A24;     /* default ink / near-black text */
  --slate-800:#1A2A37;     /* dark card surface, dividers on dark */
  --slate-700:#243646;     /* borders / hairlines on dark */

  /* ---- Cool neutral scale ---- */
  --n-600:#45586A;
  --n-500:#5E7283;
  --n-400:#8597A6;
  --n-300:#B7C3CD;
  --n-200:#DCE3E9;
  --n-100:#EEF2F5;
  --n-50:#F6F9FB;
  --white:#FFFFFF;
  --paper:#F1F4F7;

  /* ---- Semantic ---- */
  --savings:#15A06E;       --savings-tint:#E5F6EF;
  --solar:#F6A609;         --solar-tint:#FEF3DC;
  --indigo:#5B53D6;        --indigo-tint:#EBEAFE;
  --error:#E5484D;

  /* ---- Semantic aliases ---- */
  --ink:var(--slate-900);
  --text-body:var(--n-600);
  --text-muted:var(--n-500);
  --text-on-dark:var(--n-300);
  --link:var(--cyan-800);

  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-inset:var(--n-50);
  --surface-dark:var(--midnight);

  --line:var(--n-200);
  --line-dark:var(--slate-700);

  /* ---- Families ---- */
  --font-display:"Sora", system-ui, sans-serif;
  --font-text:"Manrope", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;

  /* ---- Weights ---- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  /* ---- Type scale (fluid, landing-page) ---- */
  --fs-hero:clamp(40px, 5.6vw, 66px);
  --fs-h2:clamp(29px, 4.2vw, 46px);
  --fs-h3:clamp(19px, 2vw, 24px);
  --fs-display:clamp(30px, 4vw, 60px);
  --fs-lead:clamp(18px, 1.4vw, 21px);
  --fs-body:17px;
  --fs-small:14px;
  --fs-eyebrow:13px;

  /* ---- Line heights ---- */
  --lh-hero:1.0;
  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-body:1.6;

  /* ---- Tracking ---- */
  --tracking-display:-0.02em;
  --tracking-eyebrow:0.15em;
  --tracking-mono:0.04em;

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

  /* ---- Radius ---- */
  --r-pill:999px;
  --r-lg:24px;
  --r:16px;
  --r-sm:11px;

  /* ---- Shadows ---- */
  --shadow-sm:0 2px 8px -3px rgba(11,20,28,.12);
  --shadow:0 2px 4px rgba(11,20,28,.04), 0 24px 50px -26px rgba(11,20,28,.30);
  --shadow-xl:0 40px 90px -30px rgba(4,20,30,.6);
  --shadow-cyan:0 16px 36px -14px rgba(0,206,241,.70);

  /* ---- Layout ---- */
  --maxw:1200px;
  --gutter:clamp(20px, 5vw, 68px);
  --section-pad:clamp(64px, 8vw, 120px);
  --card-gap:20px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:140ms;
  --dur:220ms;
  --dur-slow:420ms;
}

/* Helper classes shipped with the design system */
.font-display{ font-family:var(--font-display); letter-spacing:var(--tracking-display); }
.font-text{ font-family:var(--font-text); }
.font-mono{ font-family:var(--font-mono); }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.eyebrow{
  font-family:var(--font-text); font-weight:var(--fw-bold);
  font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--cyan-600);
}