/* ============================================================================
   Texas Fire Salaries — Design tokens
   Premium civic-data editorial: warm ivory surfaces, midnight navy for
   authority/structure (nav, footer, dark hero, confidence header), signal red
   as the one action color, ember orange and muted green reserved for status
   accents. Tabular/mono treatment for salary figures.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --stone-50:  #FAFAF7;
  --stone-100: #EAE6DD;
  --stone-200: #E4DED2;
  --stone-300: #DCD8CE;
  --stone-400: #B9B4AA;

  --ink-900: #152033;
  --ink-700: #2B3648;
  --ink-500: #536071;
  --ink-400: #5A6774; /* darkened from #7E8793 to clear WCAG AA (4.5:1) for normal-size text on --paper/--card */
  --ink-300: #9BA4AC;

  --ember-700: #D94132;
  --ember-600: #E84A3A;
  --ember-500: #EF6B5C;
  --ember-100: #FBDAD5;
  --ember-050: #FDEDEB;

  --teal-700: #101827;
  --teal-600: #172238;
  --teal-500: #39455B;
  --teal-100: #E6E9EF;

  --navy:   #101827;
  --navy-2: #172238;
  --red:    #E84A3A;
  --orange: #FFB45A;
  --green:  #2D8068;
  --paper:  #F4F1EA;
  --card:   #FFFEFA;
  --ink:      var(--ink-900);
  --ink-soft: var(--ink-500);
  --line:     var(--stone-300);
  --white:    #FFFFFF;

  /* ---- Semantic surfaces ---- */
  --bg:            var(--paper);
  --bg-raised:     var(--card);
  --bg-sunken:     var(--stone-100);
  --bg-inset:      var(--stone-200);
  --border:        var(--stone-300);
  --border-strong: var(--stone-400);
  --text:          var(--ink-900);
  --text-soft:     var(--ink-500);
  --text-faint:    var(--ink-400);
  --accent:        var(--ember-600);
  --accent-hover:  var(--ember-700);
  --accent-soft:   var(--ember-050);
  /* Text-link color, kept separate from --accent (buttons/borders/charts) --
     --accent itself is only 3.4:1 on --paper/--card, which fails WCAG AA
     (4.5:1) for normal-size text. These pass at 5.1:1 / 6.7:1 while staying
     the same hue, so only inline text links change -- buttons, borders, and
     chart lines (already fine at the 3:1 non-text threshold) are untouched. */
  --link:          #BC3527;
  --link-hover:    #9C2A1E;
  --accent-2:      var(--navy-2);
  --accent-2-soft: var(--teal-100);
  --focus-ring:    var(--navy-2);

  /* ---- Status: data confidence (keys mirror consensus.js CONFIDENCE) ---- */
  --c-dept-fg:        #101827; --c-dept-bg:        #E6E9EF;
  --c-strong-fg:      #1C7059; --c-strong-bg:      #E8F2EE;
  --c-reported-fg:    #536071; --c-reported-bg:    #EEEBE3;
  --c-conflicting-fg: #D94132; --c-conflicting-bg: #FCE8E6;
  --c-needed-fg:      #7E8793; --c-needed-bg:      #EEEBE3;

  /* ---- Status: freshness (keys mirror consensus.js FRESHNESS) ---- */
  --f-current-fg:  #1C7059; --f-current-bg:  #E8F2EE;
  --f-update-fg:   #87541D; --f-update-bg:   #FFF4E5;
  --f-outdated-fg: #D94132; --f-outdated-bg: #FCE8E6;
  --f-upcoming-fg: #4A4A8A; --f-upcoming-bg: #E9E8FB;

  /* ---- Typography ---- */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 5.4vw, 4.6rem);
  --fs-h1: clamp(1.9rem, 3.6vw, 2.7rem);
  --fs-h2: clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-h3: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.04;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem; --sp-9: 6rem;

  /* ---- Radius / shadow / layout ---- */
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,24,39,.05), 0 3px 10px rgba(16,24,39,.04);
  --shadow-md: 0 8px 22px rgba(16,24,39,.09);
  --shadow-lg: 0 18px 46px rgba(16,24,39,.12);
  --maxw: 1240px;
  --maxw-narrow: 780px;
  --nav-h: 76px;

  color-scheme: light;
}