/*
 * Lead Axis — design tokens.
 *
 * Structure follows the TrueLeads model: a light brand site with one saturated
 * accent, cool off-white grounds, soft shadows, rounded cards and pill buttons.
 * The accent is drawn from the Lead Axis logo blue rather than a purple.
 *
 * Every text/ground pairing below is contrast-checked; the lowest is 5.02:1.
 */

@font-face{
  font-family:"Lexend Deca";
  src:url("../fonts/LexendDeca.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  /* ---------- Brand accent, from the logo blue ---------- */
  --la-accent-50:#EEF4FD;
  --la-accent-100:#DCE8FA;
  --la-accent-200:#B6CFF4;
  --la-accent-300:#7FB0F5;
  --la-accent-400:#3D7FD8;
  --la-accent:#1B5FC1;        /* primary */
  --la-accent-600:#164FA3;
  --la-accent-700:#123F82;
  --la-accent-tint:rgba(27,95,193,.14);

  /* ---------- Ink: the logo navy ---------- */
  --la-ink:#132436;
  --la-ink-2:#0B2230;
  --la-dark:#111A26;          /* dark section ground */
  --la-dark-2:#0B121C;

  /* ---------- Neutrals ---------- */
  --la-white:#FFFFFF;
  --la-ground:#FFFFFF;
  --la-off:#F7F9FC;           /* cool off-white */
  --la-off-2:#EEF2F7;
  --la-line:#E3E9F1;
  --la-line-2:#D3DCE7;
  --la-body:#44566C;
  --la-muted:#5F7185;
  --la-faint:#8493A5;

  /* on dark */
  --la-on-dark:#C4CFDB;
  --la-on-dark-strong:#FFFFFF;
  --la-on-dark-faint:#8A99AA;
  --la-line-dark:rgba(255,255,255,.12);
  --la-surface-dark:#1A2432;

  /* ---------- Semantic ---------- */
  --la-success:#1E7A52;
  --la-success-50:#F2FBF6;
  --la-warn:#9A6B12;
  --la-error:#B23A32;
  --la-error-50:#FDF1F0;
  --la-on-accent:#FFFFFF;

  /* ---------- Type ---------- */
  --la-sans:"Lexend Deca",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --la-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --la-d1:clamp(2.125rem,4.2vw,3.5rem);   /* hero */
  --la-d2:clamp(1.625rem,2.8vw,2.5rem);   /* section heading */
  --la-d3:clamp(1.25rem,1.7vw,1.5rem);    /* sub heading */
  --la-h4:1.0625rem;
  --la-base:1rem;
  --la-sm:0.9375rem;
  --la-xs:0.8125rem;
  --la-label:0.75rem;

  --la-track-d:-0.027em;
  --la-track-label:0.08em;

  /* ---------- Space ---------- */
  --la-s1:0.25rem; --la-s2:0.5rem;  --la-s3:0.75rem; --la-s4:1rem;
  --la-s5:1.25rem; --la-s6:1.5rem;  --la-s8:2rem;    --la-s10:2.5rem;
  --la-s12:3rem;   --la-s16:4rem;   --la-s20:5rem;   --la-s24:6rem;
  --la-bay:clamp(3.75rem,7vw,6.5rem);

  /* ---------- Shape and depth ---------- */
  --la-r-sm:8px; --la-r-md:12px; --la-r-lg:16px; --la-r-xl:22px; --la-r-pill:100px;
  --la-shadow-sm:0 10px 22px rgba(19,36,54,.10);
  --la-shadow-md:0 14px 34px rgba(19,36,54,.13);
  --la-shadow-lg:0 22px 60px rgba(19,36,54,.09);

  /* Brand gradient plate, used as a wash on alternating sections. */
  --la-bg-soft:url("../img/la-bg-soft.png");

  --la-gutter:clamp(1.25rem,4vw,2.5rem);
  --la-container:1220px;

  --la-ease:cubic-bezier(.22,.61,.24,1);
  --la-ease-out:cubic-bezier(.16,1,.3,1);
  --la-dur:.28s;

  /* Aliases so existing widget CSS keeps resolving. */
  --la-paper:var(--la-off);
  --la-surface:var(--la-off-2);
  --la-ink-deep:var(--la-dark);
  --la-navy-800:var(--la-dark);
  --la-navy-900:var(--la-dark-2);
  --la-navy-950:var(--la-dark-2);
  --la-accent-hover:var(--la-accent-600);
  --la-accent-soft:var(--la-accent-50);
  --la-bronze-300:var(--la-accent-300);
  --la-bronze-500:var(--la-accent);
  --la-bone-100:var(--la-white);
  --la-bone-200:var(--la-white);
  --la-bone-300:var(--la-off);
  --la-bone-400:var(--la-line-2);
  --la-display-font:var(--la-sans);
  --la-display-weight:700;
  --la-body-size:var(--la-base);
  --la-small:var(--la-sm);
  --la-h3:var(--la-d3);
  --la-d0:var(--la-d1);
  --la-track-display:var(--la-track-d);
  --la-text-col:64ch;
  --la-r-lg-alias:var(--la-r-lg);
}