/* GoCheckMyHome — shared design tokens (savings identity, reference-file source of truth).
   Loaded by every page; per-page CSS (landing.css / report.css) builds on these. */
:root {
  --paper: #F7F5F0;            /* warm off-white app canvas (family ground --bg) */
  --card: #FFFFFF;
  --surface: #FFFFFF;         /* family --surface (Pet #FFFFFF; Storm ships #FFFDF6, matched Pet) */
  --line: #E5E4DF;            /* family hairline --line (Pet #E5E4DF; Storm #E6DFCE, matched Pet) */
  --ink: #1F2421;             /* charcoal, never pure black (Home identity ink, kept) */
  --ink-soft: #5B635E;
  --ink-faint: #6B706B;  /* AA: >=4.5:1 on #F7F5F0 (was #8A908B, 2.99:1) */

  /* savings register — emerald ("recover money") */
  --emerald-deep: #0B5C44;
  --emerald: #0B7A5B;
  --emerald-bright: #16A578;
  --emerald-light: #9FE1CB;
  --emerald-sub: #CDEBE0;
  --emerald-tint: #E3F4EC;
  --emerald-tint-ink: #0B5C44;

  /* exposure register — amber (risk, NOT savings). Decorative hue stays #B5710E;
     failing amber TEXT routes through --amber-ink (family AA ink standard). */
  --amber: #B5710E;
  --amber-ink: #795A1B;       /* amber/gold TEXT on light grounds, AA 5.9:1 (family standard) */
  --amber-ink-dark: #E5C377;  /* amber/gold TEXT on dark grounds, AA 4.7:1 (family standard) */
  --amber-tint: #FBF1DE;
  --amber-tint-ink: #6B4309;

  /* alert register — clay. RESERVED for sell-verdict chips/accents ONLY (Sell vs.
     Rent tool). A restrained brick tone: reads as directional signal, not alarm.
     Do not use anywhere else in the system. */
  --clay: #A9432C;
  --clay-tint: #F5E1DA;
  --clay-tint-ink: #8F3320;

  /* money-map cost ramp (stone) — cost is muted, recoverable is emerald */
  --stone-1: #7D7363;
  --stone-2: #A39A88;
  --stone-3: #C0B9AB;
  --stone-4: #D8D3C8;

  --shadow: 0 1px 2px rgba(31,36,33,.04), 0 10px 30px rgba(31,36,33,.07);
  --shadow-lg: 0 30px 70px rgba(8,40,30,.34);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --font-head: 'Fraunces', Georgia, serif;
}

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

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); }

@keyframes spin { to { transform: rotate(360deg); } }

/* Accessibility (Section 508 / WCAG 2.1 AA) — global visible focus indicator on
   every keyboard-focused element (2.4.7). Emerald on light grounds; per-page CSS
   overrides the colour on dark grounds (e.g. the emerald hero nav). */
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 3px; }

/* Screen-reader-only utility (visually hidden, still announced) — for skip links,
   hidden headings, and text labels on icon-only controls. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only.focusable:focus, .skip-link:focus {
  position: static !important; width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}
/* Skip-to-content link: off-screen until focused. */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--emerald-deep);
  color: #fff; padding: 10px 14px; border-radius: 8px; font-family: var(--font); font-size: 14px;
  text-decoration: none; transition: top .12s ease;
}
.skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}