@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* =========================================================
   DESIGN TOKENS — WeeSmart
   Light mode = padrão. Dark mode = opt-in via .dark class.
   ========================================================= */
@layer base {
  :root {
    /* Base */
    --background: 0 0% 98%;
    /* slate-50 ~#f8fafc */
    --foreground: 222 47% 11%;
    /* slate-900 */

    /* Surface */
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    /* Muted */
    --muted: 214 32% 95%;
    --muted-foreground: 215 16% 47%;
    /* slate-500 */

    /* Brand */
    --primary: 262 80% 58%;
    /* purple-600 */
    --primary-foreground: 0 0% 100%;

    /* Status */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Borders & inputs */
    --border: 214 32% 91%;
    /* slate-200 */
    --input: 214 32% 91%;
    --ring: 262 80% 58%;

    --radius: 0.75rem;
  }

  .dark {
    --background: 222 47% 5%;
    --foreground: 210 40% 96%;

    --card: 222 47% 8%;
    --card-foreground: 210 40% 96%;

    --muted: 217 33% 14%;
    --muted-foreground: 215 20% 60%;

    --primary: 262 80% 65%;
    --primary-foreground: 0 0% 100%;

    --destructive: 0 63% 40%;
    --destructive-foreground: 210 40% 98%;

    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 262 80% 65%;
  }
}

/* Map Tailwind semantic color tokens → CSS variables */
@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

/* Base resets */
@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
  }
}