/* Copyright (c) 2025-2026 Tahseen Huda / Ooua */
/*
 * Footing design tokens — the one place these values are defined (Phase 12B).
 * style.css (the app) and web/pages/render.mjs (the public pages) read them as
 * custom properties; src/footing/digest.py parses this file and inlines them into
 * the email. Nothing else may define a size, a space or a colour.
 *
 * Type: 5 sizes, 2 weights, 2 line-heights.  Spacing: 6 steps on a 4 px base.
 * Colour: one neutral ramp, one link, one focus, the permit-type palette (the
 * commonest type is the quietest colour), the dev-application ring, two status
 * colours. Radii ×3, one shadow, one border. Every token has a purpose comment.
 */
:root {
  /* ---- type. rem so a reader's browser font-size preference still applies (1rem = 16px by default) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-small: .75rem;     /* 12px: tags, notes, captions, axis and legend labels, table heads */
  --fs-body: .875rem;     /* 14px: body text, rows, buttons, inputs */
  --fs-lead: 1rem;        /* 16px: section headings (h2), the lede on pages, KPI numbers in the app */
  --fs-title: 1.25rem;    /* 20px: record and dialog titles, the digest's h1, KPI numbers on pages */
  --fs-display: 1.5rem;   /* 24px: page h1 */
  --fw-normal: 400;       /* running text */
  --fw-bold: 600;         /* headings, values, selected states, buttons */
  --lh-tight: 1.2;        /* headings, KPI numbers, chips and buttons */
  --lh-body: 1.45;        /* everything that wraps */

  /* ---- spacing: 4 px base, six steps */
  --s1: 4px;              /* hairline gaps: dot-to-label, chip padding, inline gaps */
  --s2: 8px;              /* control padding, gaps between chips and rows */
  --s3: 12px;             /* box padding, gutters on phones */
  --s4: 16px;             /* gutters on desktop, section gaps */
  --s5: 24px;             /* between sections, bottom padding */
  --s6: 32px;             /* page-level breathing room (sign-up box, footers) */

  /* ---- radii, shadow, border */
  --r-sm: 4px;            /* tags, small buttons, bars */
  --r-md: 8px;            /* boxes, inputs, popovers, dialogs */
  --r-pill: 999px;        /* chips */
  --shadow: 0 8px 24px rgba(0, 0, 0, .14);   /* anything floating: popovers, sheets, side panels */
  --border: 1px solid var(--line);

  /* ---- neutral ramp (light) */
  --bg: #ffffff;          /* surface: page, cards, inputs, map overlays */
  --bg-soft: #f3f4f6;     /* secondary surface: off chips, KPI cards, code, the sign-up box */
  --line: #e2e5ea;        /* hairlines and borders */
  --fg-muted: #656d7a;    /* secondary text: labels, notes, timestamps, "not disclosed" (≥ 4.5:1 on --bg and --bg-soft) */
  --fg: #16181d;          /* primary text, and the ink: selected tab, primary button, contractor dot, the pin, chart bars */
  --bg-glass: rgba(255, 255, 255, .94);   /* --bg at 94% for boxes that float over the map */

  /* ---- link and focus */
  --link: #1d4ed8;        /* every link, and only links (7.0:1 on --bg) */
  --focus: #0e7490;       /* the focus ring, nothing else (a cyan no data colour uses) */

  /* ---- permit types: ordered quiet → loud by rarity. Renovation is 70% of all permits, so it is the quietest;
     new construction and demolition change a street, so they shout. Same five everywhere: map, chips, rows, charts, pages, email, legend. */
  --type-renovation: #6f7f99;        /* slate, low saturation — the common case */
  --type-other: #a48f6e;             /* khaki — uncommon */
  --type-addition: #e39b1b;          /* amber — uncommon, moderately loud */
  --type-demolition: #8b3dd6;        /* violet — rare, loud */
  --type-new_construction: #d7263d;  /* crimson — rare, loudest */
  --dev: #0f8f5f;                    /* development-application ring and tag */

  /* ---- status (the sign-up form's result line only) */
  --ok: #0f6e45;  --ok-bg: #e6f6ee;
  --err: #b42318; --err-bg: #fdecea;

  color-scheme: light;
}

/* ---- dark: the same tokens, re-valued. System preference unless the reader chose (html[data-theme]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111317; --bg-soft: #1b1e24; --line: #2c313a; --fg-muted: #9aa3b0; --fg: #eceef1;
    --bg-glass: rgba(17, 19, 23, .92);
    --shadow: 0 8px 24px rgba(0, 0, 0, .5);
    --link: #8ab4f8; --focus: #22d3ee;
    --type-renovation: #8c9bb3; --type-other: #b39b76; --type-addition: #f2b13a; --type-demolition: #b57cf0; --type-new_construction: #ff5566;
    --dev: #3ccf95;
    --ok: #6ee7b7; --ok-bg: #0f2a1f; --err: #fca5a5; --err-bg: #3a1513;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111317; --bg-soft: #1b1e24; --line: #2c313a; --fg-muted: #9aa3b0; --fg: #eceef1;
  --bg-glass: rgba(17, 19, 23, .92);
  --shadow: 0 8px 24px rgba(0, 0, 0, .5);
  --link: #8ab4f8; --focus: #22d3ee;
  --type-renovation: #8c9bb3; --type-other: #b39b76; --type-addition: #f2b13a; --type-demolition: #b57cf0; --type-new_construction: #ff5566;
  --dev: #3ccf95;
  --ok: #6ee7b7; --ok-bg: #0f2a1f; --err: #fca5a5; --err-bg: #3a1513;
  color-scheme: dark;
}

/* ---- the type colours as classes, so no template needs an inline style */
.t-new_construction { --c: var(--type-new_construction); }
.t-addition { --c: var(--type-addition); }
.t-renovation { --c: var(--type-renovation); }
.t-demolition { --c: var(--type-demolition); }
.t-other { --c: var(--type-other); }
.t-dev { --c: var(--dev); }