@import "tailwindcss";
@plugin 'tailwindcss-animate';

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

@theme {
  --color-duck-yellow: var(--duck-yellow);
  --color-duck-orange: var(--duck-orange);
  --color-duck-teal: var(--duck-teal);
  --color-duck-forest: var(--duck-forest);
  --color-duck-dark: var(--duck-dark);
  --color-duck-beige: var(--duck-beige);

  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --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);
}

@layer base {
  :root {
    --duck-yellow: #F4C430;
    --duck-orange: #EA580C;
    --duck-teal: #0891B2;
    --duck-forest: #166534;
    --duck-dark: #14532D;
    --duck-beige: #E7D4B5;

    --pixel-grid-color: rgba(20, 83, 45, 0.1);

    --card-bg: rgba(255, 255, 255, 0.9);
    --card-grid-color: rgba(20, 83, 45, 0.08);

    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --duck-teal: #22d3ee;
    --duck-dark: #f1f5f9;
    --duck-forest: #4ade80;
    --duck-beige: #292524;

    --pixel-grid-color: rgba(200, 230, 210, 0.08);

    --card-bg: rgba(10, 20, 15, 0.9);
    --card-grid-color: rgba(200, 230, 210, 0.06);

    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }

  html, body {
    @apply bg-background text-foreground;
    margin: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
}