/*
 * Design tokens — the single place where the look of the application is decided.
 *
 * Every other stylesheet in this application refers to these variables and
 * never to a literal colour, font or radius. Reskinning therefore means editing
 * this one file: nothing downstream needs to change, and no component can drift
 * out of the palette because it has no way to name a colour of its own.
 *
 * Three theme states, not two. An explicit choice stamps `data-theme` on the
 * root element; the default "system" setting stamps nothing at all, and only
 * `prefers-color-scheme` separates light from dark there. So the bare `:root`
 * block below must hold a complete palette, and the two dark blocks redefine
 * only what changes. A token defined solely inside a media query never applies
 * in the unstamped state — that is the classic unreadable-page bug.
 */

:root {
  /* Ink — text, from strongest to faintest. */
  --ink: #191c1d;
  --ink-muted: #424754;
  --ink-faint: #727785;

  /* Ground — surfaces, from furthest back to closest. */
  --ground: #f3f4f5;
  --surface: #ffffff;
  --surface-raised: #f8f9fa;
  --surface-sunken: #edeeef;

  /* Lines. */
  --line: #e3e6ee;
  --line-strong: #c2c6d6;

  /* Accent — one hue, used sparingly. */
  --accent: #0058be;
  --accent-soft: #d8e2ff;
  --accent-contrast: #ffffff;

  /* Provenance — the product's core distinction, so it earns its own tokens.
     Declared: the agency typed it. Measured: we computed it. Inferred: a model
     read it off a photo. These must never look alike. */
  --declared: #424754;
  --declared-soft: #edeeef;
  --measured: #0058be;
  --measured-soft: #d8e2ff;
  --inferred: #8127cf;
  --inferred-soft: #f0dbff;

  /* The mark for anything a model inferred. Deliberately outside the palette
     and identical in both themes: it is a provenance mark, not a colour of the
     interface, and it must not be mistakable for a declared fact. Gradient
     sampled from the "bump" icon in the weather app, so the two projects speak
     the same visual language. */
  --ai-mark-start: #A76AB3;
  --ai-mark-mid: #CE5369;
  --ai-mark-end: #DF4643;

  /* Ink and ground for a label that sits ON a photograph rather than on a
     surface of the theme. It must stay legible whatever the image behind it,
     so it does not follow the light/dark palette. */
  --on-image: #191c1d;
  --on-image-ground: rgba(255, 255, 255, 0.92);

  /* The surround behind a photograph opened full size. Like --on-image it does
     not follow the light/dark palette: a photo needs a dark neutral around it
     to be read, in either theme. */
  --scrim: rgba(12, 16, 14, 0.82);

  /* One hue per criterion. Colour here identifies WHICH criterion, not where
     the answer came from — the row a slot sits in already says that, so the
     palette is free to do the other job. Shape carries the distinction first;
     the hues only reinforce it, because a reader who sees colour differently
     must still be able to tell a leaf from a padlock. */
  --crit-no_new_build: #9a3412;
  --crit-four_facades: #4338ca;
  --crit-with_garden: #15803d;
  --crit-no_flood_risk: #0369a1;
  --crit-no_close_neighbour: #be123c;
  --crit-away_from_centre: #4d7c0f;
  --crit-quiet_road: #475569;
  --crit-watercourse: #0f766e;

  /* Water, for a watercourse on a plot. */
  --water: #0369a1;
  --water-soft: #dbeafe;

  /* Official Belgian EPC scale. These are regulated colours, not choices:
     a Belgian reader decodes them without a legend. */
  --epc-a: #00a651;
  --epc-b: #52b848;
  --epc-c: #bed62f;
  --epc-d: #fff200;
  --epc-e: #fdb913;
  --epc-f: #f37021;
  --epc-g: #ed1c24;

  /* Type. One family, as in Emilia: headings are Inter at 800 with the letters
     pulled in, not a second face. A display serif beside it read as a different
     product. */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Small uppercase labels — section titles, field names, provenance badges.
     The face is the SANS one, not the mono: monospace is for data, the way
     Emilia uses it for CAS numbers and durations while its section titles and
     form labels stay sans. Ours had spread to every label and read as a
     typewriter. Six components repeated these three values; they live here so
     changing the face is one edit rather than six. */
  --label-size: 0.625rem;
  --label-tracking: 0.1em;
  --label-weight: 800;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.5rem;

  /* Space — a single scale, so gaps are chosen from it rather than invented. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 9999px;

  /* Emilia's soft shadow, which is how a card is separated from the ground
     there — no border at all. Two layers: a close one that lifts the edge, a
     wide one that grounds it. */
  --shadow: 0 12px 32px -4px rgba(25, 28, 29, 0.04), 0 4px 8px -2px rgba(25, 28, 29, 0.02);

  /* The ring a selected card wears. A border would change its size; a ring is
     painted outside the box and costs no width. */
  --ring-selected: 0 0 0 2px var(--accent);

  /* Layout — the three-column shell. */
  /* The panel holds the searches now, each opening onto its own criteria, so
     it needs the width a list of cards asks for rather than the width of a
     column of switches. */
  /* Deliberately the same width as the listing column. The two columns hold
     cards from one deck: same eight slots, same order, same size. Give them
     different widths and the rows stop lining up across the gap, which is the
     comparison this layout exists to make. */
  --rail-width: var(--list-width);
  /* Wide enough for the eight criterion slots to sit on one line beside a
     thumbnail. Folded onto two lines they stop lining up with the search card's
     row, which is the one thing this layout exists to make possible. */
  --list-width: 30rem;
}

/* System dark. Guarded so an explicit light choice still wins on a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e3e6ea;
    --ink-muted: #aeb5c2;
    --ink-faint: #7d8492;

    --ground: #101418;
    --surface: #181d23;
    --surface-raised: #1e242b;
    --surface-sunken: #262d35;

    --line: #2c333b;
    --line-strong: #414a55;

    --accent: #adc6ff;
    --accent-soft: #00376e;
    --accent-contrast: #00305f;

    --declared: #aeb5c2;
    --declared-soft: #262d35;
    --measured: #adc6ff;
    --measured-soft: #00376e;
    --inferred: #ddb7ff;
    --inferred-soft: #3a1a55;

    --crit-no_new_build: #f0a882;
    --crit-four_facades: #a5b4fc;
    --crit-with_garden: #6ee7a0;
    --crit-no_flood_risk: #7dd3fc;
    --crit-no_close_neighbour: #fda4bd;
    --crit-away_from_centre: #bef264;
    --crit-quiet_road: #cbd5e1;
    --crit-watercourse: #5eead4;

    --water: #7dd3fc;
    --water-soft: #0c2b3f;

    --shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.3);
  }
}

/* Explicit dark, so the toggle wins in the other direction too. */
:root[data-theme="dark"] {
  --ink: #e3e6ea;
  --ink-muted: #aeb5c2;
  --ink-faint: #7d8492;

  --ground: #101418;
  --surface: #181d23;
  --surface-raised: #1e242b;
  --surface-sunken: #262d35;

  --line: #2c333b;
  --line-strong: #414a55;

  --accent: #adc6ff;
  --accent-soft: #00376e;
  --accent-contrast: #00305f;

  --declared: #aeb5c2;
  --declared-soft: #262d35;
  --measured: #adc6ff;
  --measured-soft: #00376e;
  --inferred: #ddb7ff;
  --inferred-soft: #3a1a55;

  --crit-no_new_build: #f0a882;
  --crit-four_facades: #a5b4fc;
  --crit-with_garden: #6ee7a0;
  --crit-no_flood_risk: #7dd3fc;
  --crit-no_close_neighbour: #fda4bd;
  --crit-away_from_centre: #bef264;
  --crit-quiet_road: #cbd5e1;
  --crit-watercourse: #5eead4;

  --water: #7dd3fc;
  --water-soft: #0c2b3f;

  --shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.3);
}