/* Koeru design tokens — generated from BRAND.md. Edit BRAND.md first. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap');

:root{
  /* colour */
  --k-signal:#FFD400;   /* live / position / progress ONLY */
  --k-night:#131C2E;
  --k-granite:#59616E;
  --k-glacier:#AFC4D0;
  --k-snow:#F4F7F9;
  --k-rule:#DCE4E9;
  --k-alert:#B3261E;   /* genuine failure only; see BRAND.md, awaiting sign-off */

  /* mark strokes */
  --k-stroke-travelled:3.2;
  --k-stroke-ahead:2;
  --k-stroke-travelled-sm:5;
  --k-stroke-ahead-sm:3.4;

  /* type */
  --k-font:'Archivo',system-ui,-apple-system,sans-serif;

  /* spacing */
  --k-space-1:4px;  --k-space-2:8px;  --k-space-3:14px;
  --k-space-4:22px; --k-space-5:36px; --k-space-6:56px;

  --k-radius:4px;
  --k-radius-icon:22px;

  /* motion */
  --k-ease:cubic-bezier(.4,0,.2,1);
  --k-draw-duration:1.6s;
}

body{
  font-family:var(--k-font);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:17px;
  line-height:1.55;
  color:var(--k-night);
  background:var(--k-snow);
}

.k-display{font-variation-settings:'wdth' 125,'wght' 800;letter-spacing:-.01em;line-height:1.02}
.k-heading{font-variation-settings:'wdth' 108,'wght' 650;line-height:1.2}
.k-body   {font-variation-settings:'wdth' 100,'wght' 400}
.k-label  {font-variation-settings:'wdth' 100,'wght' 400;font-size:13px;color:var(--k-granite)}

/* Any number that updates live MUST use this — without tnum the layout
   jitters on every poll. */
.k-stat{
  font-variation-settings:'wdth' 88,'wght' 700;
  font-feature-settings:'tnum';
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}

.k-wordmark{font-variation-settings:'wdth' 125,'wght' 800;text-transform:lowercase}
.k-wordmark .tld{font-variation-settings:'wdth' 125,'wght' 300;color:var(--k-glacier)}

/* surfaces */
.k-on-night{background:var(--k-night);color:var(--k-snow)}
.k-on-night .k-label{color:var(--k-glacier)}

/* live indicator */
.k-live-dot{width:7px;height:7px;border-radius:50%;background:var(--k-signal);flex:none}

/* progress — omit the element entirely in free mode, do not render at 0% */
.k-progress{height:3px;border-radius:2px;background:rgb(175 196 208 / .28);position:relative}
.k-progress > i{position:absolute;inset:0;right:auto;background:var(--k-signal);border-radius:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}