/* ==========================================================
   Design System — Base Tokens
   --------------------------------------------------------
   Shared across all brands: typography, spacing, radii,
   semantic status colors. Brand colors are in theme-*.css.
   ========================================================== */

/* -------- Fonts -------- */
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== Type ===== */
  --font-sans: "Neue Montreal", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display-1: 72px;   --lh-display-1: 0.96; --ls-display-1: -0.03em;
  --fs-display-2: 56px;   --lh-display-2: 1.00; --ls-display-2: -0.025em;
  --fs-h1: 40px;          --lh-h1: 1.08;        --ls-h1: -0.02em;
  --fs-h2: 32px;          --lh-h2: 1.14;        --ls-h2: -0.018em;
  --fs-h3: 24px;          --lh-h3: 1.2;         --ls-h3: -0.012em;
  --fs-h4: 20px;          --lh-h4: 1.3;         --ls-h4: -0.006em;
  --fs-body-lg: 18px;     --lh-body-lg: 1.55;
  --fs-body:   16px;      --lh-body:   1.5;
  --fs-body-sm:14px;      --lh-body-sm:1.45;
  --fs-caption:12px;      --lh-caption:1.35;     --ls-caption: 0.02em;
  --fs-eyebrow:12px;      --lh-eyebrow:1.2;      --ls-eyebrow: 0.12em;
  --fs-mono:   13px;

  /* ===== Radii ===== */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl:24px;
  --r-pill:999px;

  /* ===== Spacing ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ===== Semantic status colors (shared across brands) ===== */
  --kn-success:    #1E8E3E;
  --kn-success-bg: #E5F4EA;
  --kn-warning:    #FFAD00;
  --kn-warning-bg: #FFF4D9;
  --kn-danger:     #C8321F;
  --kn-danger-bg:  #FBE5E1;
  --kn-info:       #1A6FB8;
  --kn-info-bg:    #E4EEF7;
}

/* ================= Base type styles ================= */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }

.kn-display-1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: var(--ls-display-1); }
.kn-display-2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: var(--ls-display-2); }
.kn-h1 { font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.kn-h2 { font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.kn-h3 { font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.kn-h4 { font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.kn-body-lg { font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.kn-body    { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }
.kn-body-sm { font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.kn-caption { font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--fg-3); }
.kn-eyebrow { font-weight: 500; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brand-primary); }
.kn-mono    { font-family: var(--font-mono); font-size: var(--fs-mono); }