@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);
  }
}