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

/*
 * Moon Base palette — forest / earth / sky
 *
 *   --soil        warm dark brown for body text (like rich earth)
 *   --leaf        fresh green accent
 *   --canopy      deep forest green sidebar
 *   --dew         pale sage background
 *   --ember       warm red for warnings / destructive
 */

@layer base {
  :root {
    /* Force native form controls (input/textarea/select) to the light theme so
     * they don't pick up the OS dark fill — otherwise an unstyled <input> renders
     * with a dark system background in a dark-mode browser, hiding placeholder
     * text. .dark overrides this below. */
    color-scheme: light;
    --dew: 120 18% 94%;           /* #EEF3EE — pale sage background */
    --dew-deep: 120 20% 97%;      /* slightly lighter for cards */
    --soil: 25 35% 18%;           /* #3A2B1A — warm dark brown text */
    --soil-muted: 25 20% 40%;     /* softer brown for muted copy */
    --leaf: 130 40% 38%;          /* #3D7A48 — forest green accent */
    --leaf-soft: 130 30% 72%;     /* lighter green for hovers */
    --canopy: 140 30% 16%;        /* #1E3328 — dark forest green sidebar */
    --canopy-foreground: 120 18% 88%;
    --canopy-accent: 140 28% 22%;
    --canopy-accent-foreground: 130 30% 72%;
    --canopy-border: 140 30% 12%;
    --ember: 5 55% 36%;           /* #8C3528 — deep red for destructive */
    --ember-foreground: 44 80% 95%;

    /* shadcn token bindings */
    --background: var(--dew);
    --foreground: var(--soil);
    --card: var(--dew-deep);
    --card-foreground: var(--soil);
    --popover: var(--dew-deep);
    --popover-foreground: var(--soil);
    --primary: 140 30% 16%;
    --primary-foreground: 120 18% 88%;
    --secondary: 120 15% 85%;
    --secondary-foreground: var(--soil);
    --muted: 120 12% 87%;
    --muted-foreground: var(--soil-muted);
    --accent: var(--leaf);
    --accent-foreground: 120 18% 96%;
    --destructive: var(--ember);
    --destructive-foreground: var(--ember-foreground);
    --border: 120 15% 82%;
    --input: 120 15% 82%;
    --ring: var(--leaf);
    --radius: 0.625rem;

    --sidebar: var(--canopy);
    --sidebar-foreground: var(--canopy-foreground);
    --sidebar-accent: var(--canopy-accent);
    --sidebar-accent-foreground: var(--canopy-accent-foreground);
    --sidebar-border: var(--canopy-border);
  }

  .dark {
    color-scheme: dark;
    --dew: 140 18% 10%;
    --dew-deep: 140 18% 12%;
    --soil: 120 18% 88%;
    --soil-muted: 120 12% 65%;
    --leaf: 130 40% 50%;
    --leaf-soft: 130 30% 65%;
    --canopy: 140 25% 8%;
    --canopy-foreground: 120 15% 78%;
    --canopy-accent: 140 25% 13%;
    --canopy-accent-foreground: 130 25% 80%;
    --canopy-border: 140 25% 6%;
    --ember: 5 60% 50%;
    --ember-foreground: 120 18% 92%;

    --background: var(--dew);
    --foreground: var(--soil);
    --card: var(--dew-deep);
    --card-foreground: var(--soil);
    --popover: var(--dew-deep);
    --popover-foreground: var(--soil);
    --primary: 130 40% 50%;
    --primary-foreground: 140 18% 10%;
    --secondary: 140 18% 18%;
    --secondary-foreground: var(--soil);
    --muted: 140 18% 16%;
    --muted-foreground: var(--soil-muted);
    --accent: var(--leaf);
    --accent-foreground: 140 18% 10%;
    --destructive: var(--ember);
    --destructive-foreground: var(--ember-foreground);
    --border: 140 18% 20%;
    --input: 140 18% 20%;
    --ring: var(--leaf);
  }

  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}