@custom-variant dark (&:is(.dark *));

:root {
  --background: #fafafa;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;

  /* Safety Orange for High Urgency */
  /* ROADMAP-1039: #c2410c passes WCAG AA for white text on orange and orange
   * text on the light pages; the brighter #ea580c comes back on dark sections. */
  --primary: #c2410c;
  --primary-foreground: #ffffff;

  /* Dark Zinc for contrast sections */
  --secondary: #18181b;
  --secondary-foreground: #fafafa;

  --muted: #f4f4f5;
  --muted-foreground: #52525b;
  --accent: #fff7ed;
  --accent-foreground: #9a3412;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #c2410c;
  --radius: 0px; /* Brutalist/sharp edges */
}

/* ROADMAP-1039 (accessibility): orange text stays bright on the dark sections,
 * orange buttons keep the darker shade so white text on them passes AA, and
 * grey helper text on dark backgrounds is lifted to a readable shade. */
.bg-black, .bg-secondary, .bg-zinc-900 { --primary: #ea580c; }
.bg-zinc-800 { --primary: #f97316; }
.bg-primary, .hover\:bg-primary:hover { --primary: #c2410c; }
/* An orange band holding both white and black text (about-page stats). */
.bg-primary:has(.text-black) { --primary: #d0470c; }
.bg-zinc-200 .text-red-600 { color: #b91c1c; }
.bg-zinc-200 .text-zinc-500 { color: #52525b; }
.bg-black .text-zinc-500, .bg-secondary .text-zinc-500, .bg-zinc-900 .text-zinc-500, .bg-zinc-800 .text-zinc-500,
.bg-black .text-zinc-600, .bg-secondary .text-zinc-600, .bg-zinc-900 .text-zinc-600 { color: #a1a1aa; }
/* Tinted orange chips on light pages need the deeper orange for their text. */
.bg-primary\/20.text-primary { color: #9a3412; }
.bg-black .bg-primary\/20.text-primary, .bg-secondary .bg-primary\/20.text-primary, .bg-zinc-900 .bg-primary\/20.text-primary { color: var(--primary); }

/* ROADMAP-1039: decorative watermark numbers are drawn from data-rl-num so
 * contrast checkers don't read them as (low-contrast) text. */
[data-rl-num]::before { content: attr(data-rl-num); }

@layer base {
  /* ROADMAP-230: mobile safety net. `overflow-x: clip` blocks horizontal
   * scroll from any element that escapes the viewport without breaking
   * `position: sticky`. Both html and body covered for Safari < 16. */
  html, body {
    overflow-x: clip;
  }
  h1, h2, h3, h4, h5, h6, p, span, a, li {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  .grayscale-map {
    filter: grayscale(100%) contrast(120%) invert(90%) hue-rotate(180deg);
  }
}