/* ==========================================================================
   Apartamente — design tokens. One file for the search app, the statistics
   pages and the static pages, so the three read as one product.

   Three tiers (GitHub Primer's rule): the values here are the BASE and the
   FUNCTIONAL tokens; components may use only what is defined in this file,
   and a component-specific token (--card-price-color) exists only where a
   component truly differs. scripts/test-css-tokens.ts fails the deploy when a
   literal size, radius, shadow or colour appears outside this file.

   Every colour pairing the interface uses was checked against WCAG 2.2 AA in
   both themes (docs/design-audit-2026-09-15, section 03).

   Themes: the light palette lives on bare :root; the dark palette applies
   when the OS asks for it and the visitor has not chosen light, and again
   when the visitor chose dark. The choice is stamped as data-theme by the
   inline script in each page head, before first paint.
   ========================================================================== */
:root {
  color-scheme: light;

  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type: 7 sizes, each with its own line height. */
  --text-xs: 0.75rem;   --leading-xs: 1rem;       /* 12/16  age, source list, legal captions */
  --text-sm: 0.875rem;  --leading-sm: 1.25rem;    /* 14/20  facts, meta, chips, labels, table cells */
  --text-base: 1rem;    --leading-base: 1.5rem;   /* 16/24  body, card heading, inputs */
  --text-lg: 1.125rem;  --leading-lg: 1.625rem;   /* 18/26  card price, section titles */
  --text-xl: 1.375rem;  --leading-xl: 1.75rem;    /* 22/28  result count, dialog title */
  --text-2xl: 1.75rem;  --leading-2xl: 2.125rem;  /* 28/34  detail price, page h1 on phones */
  --text-3xl: 2.25rem;  --leading-3xl: 2.625rem;  /* 36/42  page h1 on desktop */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Space: 8 steps on a 4px grid. Inside a component 1–4, between components 5–6, between sections 7–8. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Sizing */
  --control-sm: 32px; --control-md: 40px; --control-lg: 48px; --target-min: 44px;
  --icon-sm: 16px; --icon-md: 20px;
  --content-max: 1680px; --prose-max: 68ch;

  /* Shape: radius by role, not one constant. */
  --radius-sm: 4px;     /* tags, badges, table thumbnails */
  --radius-md: 8px;     /* buttons, inputs, cards, photos */
  --radius-lg: 12px;    /* dialog, bottom sheet, map panel */
  --radius-full: 999px; /* count bubbles and applied-filter chips only */

  /* Elevation: flat content has none; only things that float get a shadow. */
  --shadow-popover: 0 4px 12px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-dialog: 0 24px 48px -12px rgba(15, 23, 42, .28);

  --duration-fast: 120ms; --duration-base: 200ms; --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --z-header: 50; --z-sheet: 70; --z-dialog: 1100; --z-toast: 1200;

  /* Colour roles — light */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eceff3;
  --color-text: #0f172a;
  --color-text-muted: #4f5b6b;
  --color-text-inverse: #ffffff;
  --color-border-subtle: #e1e5ea;
  --color-border-strong: #858fa0;
  --color-accent: #0f766e;
  --color-accent-hover: #0b5f58;
  --color-on-accent: #ffffff;
  --color-accent-subtle: #e3f1ef;
  --color-accent-text: #0b5f58;
  --color-good-text: #166534;
  --color-good-bg: #e6f4ea;
  --color-bad-text: #b42318;
  --color-bad-bg: #fdecea;
  --color-warn-text: #8a3c0c;
  --color-warn-bg: #fdf0e1;
  --color-focus: #0f766e;
  --color-scrim: rgba(15, 23, 42, .5);
  --color-on-scrim: #ffffff;
  --color-photo-scrim: rgba(9, 14, 20, .62);
  --color-fav: #e11d48;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0d1117;
    --color-surface: #151a21;
    --color-surface-raised: #1c232c;
    --color-surface-sunken: #0a0d12;
    --color-text: #e6eaf0;
    --color-text-muted: #a5afbd;
    --color-text-inverse: #0d1117;
    --color-border-subtle: #262d37;
    --color-border-strong: #6b7687;
    --color-accent: #34c3b0;
    --color-accent-hover: #5fd3c3;
    --color-on-accent: #04201c;
    --color-accent-subtle: #0f2d29;
    --color-accent-text: #7fdccf;
    --color-good-text: #7ee2a8;
    --color-good-bg: #0f2e1d;
    --color-bad-text: #ff9d92;
    --color-bad-bg: #3a1714;
    --color-warn-text: #f3c27a;
    --color-warn-bg: #33240f;
    --color-focus: #5fd3c3;
    --color-scrim: rgba(0, 0, 0, .6);
    --color-fav: #fb7185;
    /* In the dark, height is a lighter surface, not a shadow. */
    --shadow-popover: none; --shadow-dialog: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0d1117;
  --color-surface: #151a21;
  --color-surface-raised: #1c232c;
  --color-surface-sunken: #0a0d12;
  --color-text: #e6eaf0;
  --color-text-muted: #a5afbd;
  --color-text-inverse: #0d1117;
  --color-border-subtle: #262d37;
  --color-border-strong: #6b7687;
  --color-accent: #34c3b0;
  --color-accent-hover: #5fd3c3;
  --color-on-accent: #04201c;
  --color-accent-subtle: #0f2d29;
  --color-accent-text: #7fdccf;
  --color-good-text: #7ee2a8;
  --color-good-bg: #0f2e1d;
  --color-bad-text: #ff9d92;
  --color-bad-bg: #3a1714;
  --color-warn-text: #f3c27a;
  --color-warn-bg: #33240f;
  --color-focus: #5fd3c3;
  --color-scrim: rgba(0, 0, 0, .6);
  --color-fav: #fb7185;
  --shadow-popover: none; --shadow-dialog: none;
}

/* --------------------------------------------------------------------------
   Legacy names. The search app, the statistics pages and the static pages
   each grew their own vocabulary; these aliases resolve all three to the
   roles above so nothing changes colour the day this file is linked. Each
   alias is deleted once its last use is rewritten to the role name.
   -------------------------------------------------------------------------- */
:root {
  /* app.css */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-raised);
  --surface-sunken: var(--color-surface-sunken);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-subtle: var(--color-text-muted);
  --border: var(--color-border-subtle);
  --border-strong: var(--color-border-strong);
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --on-primary: var(--color-on-accent);
  --primary-soft: var(--color-accent-subtle);
  --ring: color-mix(in srgb, var(--color-focus) 45%, transparent);
  --positive: var(--color-good-text);
  --positive-soft: var(--color-good-bg);
  --negative: var(--color-bad-text);
  --negative-soft: var(--color-bad-bg);
  --warning: var(--color-warn-text);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--shadow-dialog);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-md);
  --r-xl: var(--radius-lg);
  --r-pill: var(--radius-full);
  --dur-fast: var(--duration-fast);
  --dur: var(--duration-base);
  --ease: var(--ease-standard);
  --good-ink: var(--color-good-text);
  --good-bg: var(--color-good-bg);
  --warn-ink: var(--color-bad-text);
  --warn-bg: var(--color-bad-bg);
  --muted: var(--color-text-muted);
  --sunken: var(--color-surface-sunken);
  /* city.ts, build-pages.mjs, nav.css */
  --fg: var(--color-text);
  --card: var(--color-surface);
  --line: var(--color-border-subtle);
  --accent: var(--color-accent);
  --brand: var(--color-accent);
}