/* BizWithAi design system — single source of truth for colour, type, geometry.
   Imported by every HTML file in the repo. Do not define a hex value anywhere else. */

:root{
  /* ---- Base (shared by every product) ---- */
  --navy-900:#070D18;   /* page background, deepest */
  --navy-800:#0C1526;   /* cards, panels */
  --navy-750:#0F1A2E;   /* raised surfaces, figures */
  --navy-700:#121E33;   /* diagram blocks, inputs */
  --navy-600:#1A2942;   /* hover states */
  --line:#22334F;       /* borders */
  --line-soft:#182742;  /* internal dividers */

  /* ---- Text ---- */
  --text:#E8EDF5;
  --muted:#9AAAC2;
  --dim:#6E7F99;
  --white:#FFFFFF;

  /* ---- Product accent (overridden per product) ---- */
  --accent:#D6B24D;         /* Biz with AI + Signal gold */
  --accent-soft:#E4C978;
  --accent-dim:#7E6A2E;
  --accent-ink:#070D18;     /* text ON the accent */
  --accent-print:#A8891F;   /* accent value for paper surfaces */

  /* ---- Semantic ---- */
  --ok:#4FB3A5;             /* correct, safe, "do this" */
  --ok-soft:#6FD0C2;
  --warn:#E0725C;           /* wrong, risky, "watch out" */
  --warn-soft:#F08D77;
  --steel:#5C8BA8;          /* neutral secondary data */

  /* ---- Light surfaces (print, documents) ---- */
  --paper:#F4F1EA;
  --paper-ink:#12202F;
  --paper-line:#DDD8CC;

  /* ---- Geometry ---- */
  --r-sm:8px; --r:14px; --r-lg:22px;
  --space:8px;              /* everything is a multiple of this */
  --maxw:1140px;
  --maxw-read:920px;        /* reading column — never wider */

  /* ---- Type ---- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

[data-product="cpc"]{
  --accent:#E08A3C; --accent-soft:#F0A860;
  --accent-dim:#8A5520; --accent-ink:#1A1005;
  --accent-print:#C4762C;
}

/* ---- Type scale: 12 / 13.5 / 15 / 16 / 19 / 24 / 32 / 44 / 60px. Nothing between. ---- */
:root{
  --fs-12:12px; --fs-13:13.5px; --fs-15:15px; --fs-16:16px;
  --fs-19:19px; --fs-24:24px; --fs-32:32px; --fs-44:44px; --fs-60:60px;
}

*{box-sizing:border-box}

html{background:var(--navy-900)}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-16);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-weight:650;
  margin:0 0 .5em;
}
h1{font-size:var(--fs-44); letter-spacing:-0.02em}
h2{font-size:var(--fs-32); letter-spacing:-0.02em}
h3{font-size:var(--fs-24); letter-spacing:-0.01em}
h4{font-size:var(--fs-19)}

.display{font-size:var(--fs-60); font-weight:750; letter-spacing:-0.02em}

.eyebrow{
  font-size:var(--fs-12);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent);
}

p{margin:0 0 1em}
a{color:inherit}

.reading{max-width:var(--maxw-read); margin:0 auto}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---- Focus states — always visible ---- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- Print / paper surface ---- */
[data-mode="print"]{
  background:var(--paper);
  color:var(--paper-ink);
}
[data-mode="print"] .eyebrow,
[data-mode="print"] .accent-text{
  color:var(--accent-print);
}