@tailwind base;
@tailwind components;
@tailwind utilities;

/*
  Design tokens. The ONLY place colors are defined. Change --primary / --ring
  to re-brand the whole app; a future user-facing accent picker can write these
  two variables at runtime. See docs/specs/ui-overhaul.md.
*/
@layer base {
  /*
    Design tokens — v2 (per docs/discovery/04). Dark-first, warm-leaning neutrals,
    green brand accent derived from #3ba31f. Light is a genuine white (not grey).
    Green is never the SOLE state signal (pair with icon/shape) — colour-blind-safe
    by construction. Values are HSL triples (space-separated) for Tailwind's
    `hsl(var(--x) / <alpha-value>)` mapping.
  */
  :root {
    /* Light — genuine white, warm off-white surfaces */
    --background: 0 0% 100%;
    --foreground: 30 10% 12%;
    --card: 40 33% 99%;
    --muted: 40 24% 96%;
    --muted-foreground: 35 8% 42%;
    --border: 38 18% 89%;
    --input: 38 18% 89%;
    --ring: 110 62% 38%;

    /* Brand accent — green (from #3ba31f), darkened for AA white-on-green */
    --primary: 110 62% 33%;
    --primary-foreground: 0 0% 100%;

    /* Semantic */
    --success: 145 55% 38%;
    --warning: 38 92% 45%;
    --danger: 4 74% 50%;
    --danger-foreground: 0 0% 100%;

    --radius: 0.5rem; /* lg 8px · md 6px · sm 4px */
  }

  .dark {
    /* Dark (default) — warm charcoal layers, NOT pure black */
    --background: 30 7% 10%;
    --foreground: 40 22% 93%;
    --card: 30 7% 13%;
    --muted: 30 6% 17%;
    --muted-foreground: 35 9% 64%;
    --border: 30 7% 22%;
    --input: 30 7% 24%;
    --ring: 110 50% 46%;

    /* Brand accent — luminous green for dark surfaces */
    --primary: 110 52% 42%;
    --primary-foreground: 0 0% 100%;

    --success: 145 50% 48%;
    --warning: 38 90% 56%;
    --danger: 4 72% 58%;
    --danger-foreground: 0 0% 100%;
  }

  * {
    border-color: hsl(var(--border));
  }

  body {
    @apply bg-background text-foreground antialiased;
    /* Inter (variable, self-hosted via @fontsource-variable/inter); system fallback. */
    font-family: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system,
      'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  /* Subtle, modern scrollbars that respect the theme. */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
    background-clip: padding-box;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}