/*
  Kuli Kuli brand foundations: fonts and tokens, nothing else.
  Shared by the Rails layout and every one-pager in /public (as /brand/kk.css),
  so it must stay free of element and class selectors.
*/
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

@font-face {
  font-family: "BN Hillside Grotesk";
  src: url("/assets/BNHillsideGrotesk-c9e92ade.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Calibre";
  src: url("/assets/CalibreRegular-9f7a7af9.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --kk-forest-green: #026251;
  --kk-forest-deep: #014a3d;
  --kk-green: #52b480;
  --kk-neon-green: #d0de41;
  --kk-orange: #f15f23;
  --kk-cream: #f4f5ea;
  --kk-white: #ffffff;
  --kk-ink: #1d1d1d;
  --kk-gray-300: #e1e1e1;
  --fg-muted: #52555a;

  /* Dark surface, the default mode */
  --fg-2-on-dark: rgba(255, 255, 255, 0.85);
  --fg-muted-on-dark: rgba(255, 255, 255, 0.62);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-hi: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.14);

  --font-display: "BN Hillside Grotesk", system-ui, sans-serif;
  --font-body: "Calibre", "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", "SF Mono", monospace;

  --track-eyebrow: 0.075em;
  --track-display: -0.01em;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-xxl: 100px;
  --gutter-container: clamp(20px, 4vw, 60px);

  --radius-form: 6px;
  --radius-card: 20px;
  --radius-button: 30px;
  --radius-pill: 60px;
  --radius-chip: 80px;
}