@import "tailwindcss";
@import "@alqove/design-tokens/build/css-variables.css";
@config "../../tailwind.config.ts";

@theme {
  /* The brand accent. `forest` is the app's single green: ~275 utilities read
     it, mostly as borders at 10-30 percent alpha and as body text at 50-80.
     It used to hold #059669 (Tailwind forest-600), which is why the wordmark
     and the interface never matched. Hexes mirror `brand.*` in
     @alqove/design-tokens; they are literal here because @theme feeds
     Tailwind's utility generation. 600 is the authored forest, 800 the
     authored forestDeep, 100 the authored sage. */
  --color-forest: #1f3a2e;
  --color-forest-50: #f2f7ef;
  --color-forest-100: #d3e0c6;
  --color-forest-200: #b0c9a2;
  --color-forest-300: #87a87e;
  --color-forest-400: #5e875c;
  --color-forest-500: #3c6343;
  --color-forest-600: #1f3a2e;
  --color-forest-700: #1a382a;
  --color-forest-800: #143525;
  --color-forest-900: #0b1e14;
  --color-ink: #0f172a;
  --color-bone: #f5f1ea;
  --color-terracotta: #c1635a;
}

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    /* brand forest #1f3a2e. Was 160 84% 39% (#10b77f) - a third green,
       matching neither the marks nor --color-forest. */
    --primary: 153.3 30.3% 17.5%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 153.3 30.3% 17.5%;
    --radius: 0.25rem;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-dm-sans), system-ui, -apple-system, sans-serif;
  }
}