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

/* Water Theme Design System - All colors MUST be HSL */

@layer base {
  :root {
    --background: 200 30% 98%;
    --foreground: 210 60% 15%;

    --card: 0 0% 100%;
    --card-foreground: 210 60% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 60% 15%;

    --primary: 210 95% 42%;
    --primary-foreground: 0 0% 100%;

    --secondary: 195 100% 92%;
    --secondary-foreground: 210 60% 15%;

    --muted: 200 20% 92%;
    --muted-foreground: 210 20% 45%;

    --accent: 180 65% 45%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 85% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 200 25% 88%;
    --input: 200 25% 90%;
    --ring: 210 95% 42%;

    --radius: 0.75rem;

    /* Water Gradients */
    --gradient-water: linear-gradient(135deg, hsl(210 95% 42%), hsl(195 85% 55%));
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(200 30% 98%));

    /* Shadow System */
    --shadow-soft: 0 2px 8px -2px hsl(210 60% 15% / 0.08);
    --shadow-medium: 0 4px 16px -4px hsl(210 60% 15% / 0.12);
    --shadow-strong: 0 8px 24px -8px hsl(210 60% 15% / 0.16);
  }

  .dark {
    --background: 210 60% 8%;
    --foreground: 200 20% 95%;

    --card: 210 55% 12%;
    --card-foreground: 200 20% 95%;

    --popover: 210 55% 12%;
    --popover-foreground: 200 20% 95%;

    --primary: 195 100% 55%;
    --primary-foreground: 210 60% 10%;

    --secondary: 210 40% 20%;
    --secondary-foreground: 200 20% 95%;

    --muted: 210 40% 18%;
    --muted-foreground: 200 15% 65%;

    --accent: 180 65% 45%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 75% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 40% 22%;
    --input: 210 40% 20%;
    --ring: 195 100% 55%;

    --gradient-water: linear-gradient(135deg, hsl(195 100% 55%), hsl(180 85% 50%));
    --gradient-card: linear-gradient(180deg, hsl(210 55% 12%), hsl(210 60% 10%));

    --shadow-soft: 0 2px 8px -2px hsl(0 0% 0% / 0.2);
    --shadow-medium: 0 4px 16px -4px hsl(0 0% 0% / 0.3);
    --shadow-strong: 0 8px 24px -8px hsl(0 0% 0% / 0.4);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: 'kern' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }

  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }
}

@layer utilities {
  /* Gradient Utilities */
  .gradient-water {
    background: var(--gradient-water);
  }

  .gradient-card {
    background: var(--gradient-card);
  }

  /* Shadow Utilities */
  .shadow-soft {
    box-shadow: var(--shadow-soft);
  }

  .shadow-medium {
    box-shadow: var(--shadow-medium);
  }

  .shadow-strong {
    box-shadow: var(--shadow-strong);
  }

  /* Text Color Utilities */
  .text-primary {
    color: hsl(var(--primary));
  }

  .text-secondary {
    color: hsl(var(--secondary));
  }

  .text-muted-foreground {
    color: hsl(var(--muted-foreground));
  }

  .text-destructive {
    color: hsl(var(--destructive));
  }

  .text-foreground {
    color: hsl(var(--foreground));
  }

  /* Background Color Utilities */
  .bg-background {
    background-color: hsl(var(--background));
  }

  .bg-card {
    background-color: hsl(var(--card));
  }

  .bg-muted {
    background-color: hsl(var(--muted));
  }

  .bg-primary {
    background-color: hsl(var(--primary));
  }

  .bg-destructive {
    background-color: hsl(var(--destructive));
  }

  /* Border Color Utilities */
  .border-border {
    border-color: hsl(var(--border));
  }

  .border-input {
    border-color: hsl(var(--input));
  }

  .border-primary {
    border-color: hsl(var(--primary));
  }

  .border-destructive {
    border-color: hsl(var(--destructive));
  }

  /* Ring Color Utilities */
  .ring-primary {
    --tw-ring-color: hsl(var(--ring));
  }
}