@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 */
  --primary: #ea580c;
  --primary-foreground: #ffffff;

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

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

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

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