/* BTH Design System tokens — frozen v1.0 */
/* Self-host woff2 into assets/fonts when available; local/system fallbacks keep production offline-safe. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local("Manrope"), local("Manrope Regular"), url("../fonts/manrope-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local("Inter"), local("Inter var"), url("../fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: local("JetBrains Mono"), url("../fonts/jetbrains-mono-var.woff2") format("woff2");
}

:root {
  /* Brand */
  --color-navy: #0C1B2A;
  --color-graphite: #202A33;
  --color-steel: #6B7680;
  --color-offwhite: #F4F6F7;
  --color-orange: #F28C28;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-divider: #E8ECEE;
  --color-border: #D9DFE2;
  --color-disabled: #B4BDC4;
  --color-on-dark-muted: #8D98A1;
  --color-navy-raised: #16232F;
  --color-on-dark: #F4F6F7;
  --color-on-dark-soft: #B9C2C9;
  --color-on-dark-dim: #9BA6AF;

  /* Division */
  --color-electrical: #2F80ED;
  --color-mechanical: #D96B27;
  --color-construction: #C89B2C;

  /* Semantic */
  --color-success: #1E8E5A;
  --color-error: #C0392B;
  --color-warning: #B07D12;
  --color-info: #1F5FAF;

  /* Typography */
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* Radius — restrained */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --header-utility: 40px;
  --header-nav: 72px;
  --header-h: 112px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 220ms;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(12, 27, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(12, 27, 42, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}