/* ==========================================================================
   SLS Design System — Core Tokens
   Shared across PCAP, RHEA, Argus, and the SLS marketing site.
   Source of truth: VISUAL_IDENTITY.md (mirrored in each product repo).
   ========================================================================== */

/* Self-hosted EB Garamond — licensed files supplied by the team (Feb 2026). */
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Core brand -------------------------------------------------- */
  --gold:         #E8A030;   /* primary accent — buttons, links, focus, active */
  --gold-light:   #F5C870;   /* hover tint, subtle highlights */
  --gold-faint:   #FDF3E0;   /* selected-option bg, disabled fill */
  --cream:        #FDF8F0;   /* page background (never pure white) */
  --white:        #FFFFFF;   /* cards, inputs, overlays */
  --dark:         #4A4A4A;   /* primary text — softer than pure black */
  --dark-light:   #6B6B6B;   /* secondary text, captions, inactive UI */
  --border:       #DDDDDD;   /* inputs, cards, dividers */

  /* ---------- Semantic ---------------------------------------------------- */
  --green:        #388E3C;   /* positive: meets guideline, valid */
  --green-bg:     #E8F5E9;   /* pale-green status fill */
  --green-dark:   #2E7D32;   /* dark-green status text */
  --red:          #D32F2F;   /* error, high exposure */
  --amber:        #E65100;   /* above-guideline status text */
  --amber-bg:     #FFF3E0;   /* pale-peach status fill */
  --amber-note:   #FF9800;   /* vulnerable-group note left border */
  --blue:         #1565C0;   /* informational (used sparingly) */
  --daqi-yellow:  #FFF8E1;   /* DAQI health-message background */

  /* ---------- Data-viz (editorial palette) -------------------------------- */
  --env-home:     #5C6BC0;   /* indigo — domestic */
  --env-work:     #26A69A;   /* teal */
  --env-commute:  #E8A030;   /* brand gold */

  /* WHO scale (5-segment gradient, green → deep amber) */
  --who-1: #4CAF50;
  --who-2: #8BC34A;
  --who-3: #FDD835;
  --who-4: #FFB300;
  --who-5: #FF8F00;

  /* ---------- Typography -------------------------------------------------- */
  --font-serif:   'EB Garamond', 'Century Schoolbook', Georgia, serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.7rem;    /* tooltips, DAQI numbers, fine print */
  --text-sm:   0.85rem;   /* labels, captions, subtitles */
  --text-base: 1rem;      /* body, buttons */
  --text-lg:   1.25rem;   /* h2 */
  --text-xl:   1.75rem;   /* h1 */
  --text-2xl:  2rem;      /* display numbers */

  --leading-tight: 1.2;   /* headings */
  --leading-body:  1.6;   /* body */

  /* ---------- Surfaces ---------------------------------------------------- */
  --radius:     8px;      /* near-universal */
  --radius-lg:  16px;     /* modals / large overlays */
  --radius-pill: 20px;    /* verdict pills, badges */

  --shadow:     0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 4px 24px rgba(0, 0, 0, 0.12);

  /* ---------- Spacing (informal scale in use) ----------------------------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* ---------- Motion ------------------------------------------------------ */
  --ease-unhurried: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-logo:     800ms;
  --dur-card-in:  350ms;
  --dur-card-out: 250ms;
  --dur-fade:     300ms;
  --dur-hover:    150ms;
  --dur-viz:      500ms;
  --dur-pill:     200ms;
}

/* ==========================================================================
   Semantic element styles — apply defaults that match the system.
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  color: var(--dark);
  background: var(--cream);
  line-height: var(--leading-body);
  min-height: 100dvh;
}

/* Headings → serif, medium (500). Never bold for EB Garamond. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--dark);
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: 1.05rem; }

p { font-size: var(--text-base); }

small, .text-sm { font-size: var(--text-sm); color: var(--dark-light); }
.text-xs { font-size: var(--text-xs); color: var(--dark-light); }

code, pre {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover { opacity: 0.85; text-decoration: underline; }

/* Display numbers — the one place sans-readable usage is broken in favour of
   serif bold (700). Used for pollutant values, big stats. */
.display-number {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--dark);
}

/* Focus — 3px gold with 2px offset. On-brand, AAA-visible. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Utility: skip-link + sr-only */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  padding: 0.5rem 1rem;
  background: var(--gold); color: var(--white);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reduced motion — non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Per-deployment colour overrides — civic variants keep text constant.
   Only --gold, accent, and --cream are swapped.
   ========================================================================== */

[data-theme="tower-hamlets"] { --gold: #00594C; --cream: #F0F7F6; }
[data-theme="reading"]       { --gold: #0A51C5; --cream: #F3F2F1; }