/* The Homeowners Show — color system.
   Bold monochrome + ONE accent. Accent is for CTAs, play buttons, links, hovers.
   Rule: text on accent is INK, never white (white-on-accent fails AA). */
:root{
  /* ---- Base neutrals: ink ramp ---- */
  --ink-900:#0E0E0F; --ink-800:#16161A; --ink-700:#22222A; --ink-600:#33333C;
  --gray-500:#5C5C67; --gray-400:#83838F; --gray-300:#ABABB5; --gray-200:#D5D5DA;
  --gray-100:#E7E6E4; --paper:#F7F5F2; --white:#FFFFFF;

  /* ---- Accent: Torch Orange ---- */
  --accent:#FF5A1F; --accent-hover:#FF7844; --accent-press:#D8410E; --accent-tint:#FFEDE5;

  /* ---- Semantic: surfaces ---- */
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunken:var(--gray-100);
  --surface-inverse:var(--ink-900);
  --surface-inverse-card:var(--ink-800);
  --surface-inverse-raised:var(--ink-700);
  --surface-accent:var(--accent);

  /* ---- Semantic: text ---- */
  --text-display:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--gray-500);
  --text-faint:var(--gray-400);
  --text-on-accent:var(--ink-900);
  --text-on-inverse:var(--paper);
  --text-on-inverse-muted:var(--gray-300);
  --text-link:var(--ink-900);
  --text-link-hover:var(--accent-press);
  --text-link-on-inverse:var(--accent);

  /* ---- Semantic: lines ---- */
  --border-hairline:var(--gray-200);
  --border-strong:var(--ink-900);
  --border-inverse:#2E2E36;
  --divider:var(--gray-200);

  /* ---- Semantic: states ---- */
  --focus-ring:var(--accent);
  --state-error:#C3200B;
  --state-success:#1B7A3E;
  --overlay-scrim:rgba(14,14,15,.72);
}
/* Dark section scope: drop [data-theme="dark"] on any section to flip semantics. */
[data-theme="dark"]{
  --surface-page:var(--ink-900);
  --surface-card:var(--ink-800);
  --surface-sunken:var(--ink-700);
  --text-display:var(--white);
  --text-body:var(--gray-200);
  --text-muted:var(--gray-400);
  --text-faint:var(--gray-500);
  --text-link:var(--accent);
  --text-link-hover:var(--accent-hover);
  --border-hairline:var(--border-inverse);
  --border-strong:var(--white);
  --divider:var(--border-inverse);
}