/* KUBAN HUNTER · Brand tokens v1.1 · 2026-10-26
   sRGB palette. The full logo and its descriptor are fixed SVG artwork.
   Descriptor source: Manrope 500; use the supplied outlines, never retype it.
   Unitless line heights are exact; rounded brandbook values are for reference.
   Keep fonts/ alongside tokens/ when distributing. */
@import url("../fonts/fonts.css");

:root {
  --kh-color-pine: #193B35;
  --kh-color-reed: #B3A17B;
  --kh-color-ivory: #F0EBE1;
  --kh-color-charcoal: #252B29;
  --kh-color-white: #FFFFFF;

  --kh-background: var(--kh-color-ivory);
  --kh-surface: var(--kh-color-white);
  --kh-text: var(--kh-color-charcoal);
  --kh-heading: var(--kh-color-pine);
  --kh-accent: var(--kh-color-reed);
  --kh-inverse-background: var(--kh-color-pine);
  --kh-inverse-text: var(--kh-color-ivory);
  --kh-font-heading: "Manrope", Arial, sans-serif;
  --kh-font-body: "Golos Text", Arial, sans-serif;
  --kh-font-ui: "Manrope", Arial, sans-serif;
  --kh-weight-regular: 400;
  --kh-weight-medium: 500;
  --kh-weight-semibold: 600;
  --kh-weight-bold: 700;
  --kh-weight-extrabold: 800;
  --kh-type-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  --kh-type-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --kh-type-h2: clamp(1.625rem, 1.4375rem + .75vw, 2rem);
  --kh-type-h3: clamp(1.375rem, 1.3125rem + .25vw, 1.5rem);
  --kh-type-lead: clamp(1.25rem, 1.1875rem + .25vw, 1.375rem);
  --kh-type-body: clamp(1rem, .9375rem + .25vw, 1.125rem);
  --kh-type-caption: .875rem;
  --kh-type-label: .75rem;
  --kh-leading-display: 1.08;
  --kh-leading-heading: 1.2;
  --kh-leading-h1: 1.12;
  --kh-leading-h2: 1.2;
  --kh-leading-h3: 1.25;
  --kh-leading-lead: 1.5;
  --kh-leading-caption: 1.45;
  --kh-leading-label: 1.4;
  --kh-leading-body: 1.6;
  --kh-tracking-label: .12em;
  --kh-content-max: 75rem;
  --kh-reading-max: 65ch;
  --kh-gutter: clamp(1.25rem, .375rem + 3.5vw, 3rem);
  --kh-radius-control: .25rem;
  --kh-rule: 1px;
  --kh-space-4: 0.25rem;
  --kh-space-8: 0.5rem;
  --kh-space-12: 0.75rem;
  --kh-space-16: 1rem;
  --kh-space-24: 1.5rem;
  --kh-space-32: 2rem;
  --kh-space-48: 3rem;
  --kh-space-64: 4rem;
  --kh-space-96: 6rem;
  --kh-space-128: 8rem;
}

.kh-body { font: 400 var(--kh-type-body)/var(--kh-leading-body) var(--kh-font-body); color: var(--kh-text); background: var(--kh-background); }
.kh-heading { font-family: var(--kh-font-heading); font-weight: 700; line-height: var(--kh-leading-heading); color: var(--kh-heading); }
.kh-display { font: 800 var(--kh-type-display)/var(--kh-leading-display) var(--kh-font-heading); color: var(--kh-heading); }
.kh-h1 { font: 700 var(--kh-type-h1)/var(--kh-leading-h1) var(--kh-font-heading); color: var(--kh-heading); }
.kh-h2 { font: 700 var(--kh-type-h2)/var(--kh-leading-h2) var(--kh-font-heading); color: var(--kh-heading); }
.kh-h3 { font: 600 var(--kh-type-h3)/var(--kh-leading-h3) var(--kh-font-heading); color: var(--kh-heading); }
.kh-lead { font: 400 var(--kh-type-lead)/var(--kh-leading-lead) var(--kh-font-body); }
.kh-caption { font: 400 var(--kh-type-caption)/var(--kh-leading-caption) var(--kh-font-body); }
.kh-label { font: 600 var(--kh-type-label)/var(--kh-leading-label) var(--kh-font-ui); letter-spacing: var(--kh-tracking-label); text-transform: uppercase; }
.kh-inverse { color: var(--kh-inverse-text); background: var(--kh-inverse-background); }
.kh-inverse .kh-heading, .kh-inverse .kh-display, .kh-inverse .kh-h1, .kh-inverse .kh-h2, .kh-inverse .kh-h3 { color: inherit; }
.kh-button { font: 600 1rem/1.4 var(--kh-font-ui); color: var(--kh-color-ivory); background: var(--kh-color-pine); border: 1px solid var(--kh-color-pine); border-radius: var(--kh-radius-control); padding: .875rem 1.5rem; }
.kh-button:hover { background: var(--kh-color-charcoal); border-color: var(--kh-color-charcoal); }
.kh-button:focus-visible { outline: 2px solid var(--kh-color-pine); outline-offset: 3px; }
.kh-inverse .kh-button:focus-visible { outline-color: var(--kh-color-ivory); }
/* Reed on ivory/white fails AA for text: reserve for noninformational details.
   Use pine or charcoal text on reed. Underline inline links. */