/* KollazLeads design tokens. Single source for colour, type, spacing.
   Primitive values first, semantic roles second. Contrast measured
   2026-11-09; every text pair passes WCAG 4.5:1 in both modes (see
   BUILD-NOTES.md for the measured table). */

@font-face {
  font-family: "Carlito";
  src: url("/assets/fonts/carlito-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/assets/fonts/carlito-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/noto-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/noto-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/noto-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/noto-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type scale (px): 12 14 16 18 20 24 30 36 48 60 72 */
  --font-head: "Noto Sans", "Carlito", sans-serif;
  --font-body: "Carlito", "Noto Sans", sans-serif;
  /* Spacing scale (px): 4 8 12 16 24 32 48 64 96 128 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --radius: 12px;
  --motion-micro: 150ms;
  --motion-std: 250ms;

  /* Light mode semantic roles */
  --surface: #FAF7F1;
  --surface-alt: #F3EEE2;
  --surface-raised: #FFFFFF;
  --text-1: #1D2420;
  --text-2: #4C5850;
  --border: #D8D0BE;
  --primary: #7A4E0B;
  --primary-hover: #68430A;
  --primary-active: #573806;
  --on-primary: #FFFFFF;
  --accent-soft: #F1E7D2;
  --focus-ring: #7A4E0B;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #131109;
    --surface-alt: #1C1912;
    --surface-raised: #1E1B12;
    --text-1: #F4F0E4;
    --text-2: #C9C0AA;
    --border: #3A3524;
    --primary: #E8B33C;
    --primary-hover: #F2C14E;
    --primary-active: #D9A52E;
    --on-primary: #211806;
    --accent-soft: #2A2513;
    --focus-ring: #E8B33C;
    color-scheme: dark;
  }
}