/* Boids look (catalog record `boids`): a pale lavender dusk sky where the
   flock draws itself in ink, inspected from one white rounded card, with one
   raspberry accent. Light is the designed default; dark is the dusk-night
   counterpart from the same references. */

@font-face {
  font-family: "Hanken Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Measured ratios (WCAG): light ink/bg 11.54, muted/bg 5.36, muted/surface
   8.45, muted/well 7.41, accent-ink/accent 5.66, accent/bg 3.59 (focus ring);
   dark ink/bg 15.61, muted/bg 7.43, muted/surface 6.76, muted/well 5.98,
   accent-ink/accent 7.77, accent/bg 7.77. Rule colours are graphics only
   (vectors, chip dots) and clear 3:1 on their ground. */

:root {
  --font-display: "Hanken Grotesk Variable", "Geist Variable", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Geist Variable", ui-sans-serif, system-ui, sans-serif;

  --bg: #cfcbe6;
  --surface: #ffffff;
  --ink: #16151a;
  --muted: #4f4b5a;
  --accent: #c2255c;
  --accent-ink: #ffffff;

  --well: #f1eff7;
  --well-hover: #e7e4f1;
  --border: rgba(22, 21, 26, 0.1);
  --scrim: rgba(22, 21, 26, 0.35);
  --shadow: 0 16px 48px rgba(46, 36, 92, 0.18);
  --focus: #c2255c;

  /* the rule key: one colour per steering rule, shared by the weight chips
     and the debug overlay vectors */
  --rule-sep: #c2255c;
  --rule-ali: #2f5fd0;
  --rule-coh: #0f7a5c;

  /* canvas: the fixed palette draws the flock in ink on the sky, like
     starlings at dusk; predators are the accent, the one bird that differs */
  --flock: #16151a;
  --predator: #c2255c;
  --boid-sat: 70%;
  --boid-light: 34%;
  --density-hue: 338;
  --density-sparse: 74%;
  --density-dense: 24%;

  --radius: 12px;
  --radius-control: 8px;
  --radius-chip: 999px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #15131c;
  --surface: #1f1c28;
  --ink: #eeebf4;
  --muted: #a7a2b6;
  --accent: #ff7faa;
  --accent-ink: #15131c;
  --well: #29253a;
  --well-hover: #332e47;
  --border: rgba(238, 235, 244, 0.1);
  --scrim: rgba(0, 0, 0, 0.5);
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  --focus: #ff7faa;
  --rule-sep: #ff7faa;
  --rule-ali: #86a8ff;
  --rule-coh: #4fcfa6;
  --flock: #eeebf4;
  --predator: #ff7faa;
  --boid-sat: 80%;
  --boid-light: 66%;
  --density-sparse: 32%;
  --density-dense: 76%;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15131c;
    --surface: #1f1c28;
    --ink: #eeebf4;
    --muted: #a7a2b6;
    --accent: #ff7faa;
    --accent-ink: #15131c;
    --well: #29253a;
    --well-hover: #332e47;
    --border: rgba(238, 235, 244, 0.1);
    --scrim: rgba(0, 0, 0, 0.5);
    --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    --focus: #ff7faa;
    --rule-sep: #ff7faa;
    --rule-ali: #86a8ff;
    --rule-coh: #4fcfa6;
    --flock: #eeebf4;
  --predator: #ff7faa;
    --boid-sat: 80%;
    --boid-light: 66%;
    --density-sparse: 32%;
    --density-dense: 76%;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button,
input,
select {
  font-family: inherit;
}