/* ============================================================
   NestScore design tokens (subset)
   ============================================================
   Excerpt from the NestScore design-skill `colors_and_type.css`.
   Anything new (account page, saved-search modal, email previews)
   imports tokens from here so colours/type stay in one place.
   The existing map.html / styles.css keep their hand-rolled values
   for now; they can opt in by referencing the same vars.
   ============================================================ */

:root {
  /* Brand core */
  --moss:       #1F4D3F;
  --moss-700:   #0E3328;
  --moss-300:   #5A8A7B;
  --moss-100:   #C9D9CF;
  --moss-050:   #DDE6DF;

  --paper:      #E8DFC9;
  --paper-dim:  #DDD2B5;
  --paper-lift: #F0E8D2;

  --ink:        #0B1311;
  --ink-700:    #1E2A26;
  --ink-500:    #4E5953;
  --ink-300:    #888F8A;
  --ink-100:    #B8BCB8;

  --border:        #C9BE9F;
  --border-strong: #B0A485;

  --brick:      #B14B30;
  --brick-700:  #8C3B25;
  --brick-100:  #E8C7B6;

  /* Semantic */
  --bg:         var(--paper);
  --bg-elev:    var(--paper-lift);
  --bg-muted:   var(--paper-dim);
  --fg:         var(--ink);
  --fg-muted:   var(--ink-500);
  --fg-subtle:  var(--ink-300);
  --fg-brand:   var(--moss);
  --fg-accent:  var(--brick);
  --link:       var(--moss);
  --link-hover: var(--brick);

  /* Status */
  --success: #2E7D5B;
  --warning: #B07A1F;
  --danger:  #B0432B;
  --info:    #2B5E7E;

  /* Score bands (0–100) — must match assets/js/score.js scoreColor() */
  --score-90: #1F4D3F;
  --score-80: #4F8A6E;
  --score-70: #B5A24B;
  --score-60: #C8593B;
  --score-00: #8C4231;

  /* Type — Geist is already loaded by index.css / map.css */
  --font-sans:  "Geist", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  --fs-display-l: 64px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-ui: 13px;
  --fs-meta: 12px;
  --fs-caps: 11px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 9999px;

  /* Shadows (warm-tinted) */
  --shadow-1: 0 1px 2px rgba(11, 19, 17, 0.06), 0 2px 6px rgba(11, 19, 17, 0.07);
  --shadow-2: 0 2px 4px rgba(11, 19, 17, 0.08), 0 8px 20px rgba(11, 19, 17, 0.12);
  --shadow-3: 0 8px 16px rgba(11, 19, 17, 0.12), 0 24px 48px rgba(11, 19, 17, 0.20);
  --shadow-focus: 0 0 0 3px rgba(31, 77, 63, 0.30);

  /* Motion */
  --dur-quick: 150ms;
  --dur-base:  220ms;
  --dur-slow:  350ms;
  --ease:      cubic-bezier(.2, .8, .2, 1);

  /* Layout */
  --header-h:  56px;
  --maxw-page: 1280px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}