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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL. */

@layer base {
  :root {
    /* Core palette */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: var(--foreground);

    --popover: 0 0% 100%;
    --popover-foreground: var(--foreground);

    /* Brand */
    --primary: 221 83% 53%; /* Ottawa blue */
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

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

    --accent: 199 89% 48%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221 83% 53%;

    --radius: 0.75rem;

    /* Sidebar */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 221 83% 53%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Gradients & shadows */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
    --shadow-elevated: 0 24px 48px -24px hsl(var(--primary) / 0.35);

    /* Motion */
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

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

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

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

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

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

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

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

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    --gradient-primary: linear-gradient(135deg, hsl(224 76% 48%) 0%, hsl(199 89% 48%) 100%);
    --shadow-elevated: 0 24px 48px -24px hsl(224 76% 48% / 0.35);
  }
}

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

@layer components {
  .card { @apply rounded-xl border bg-card p-5 shadow-sm; }
  .link { @apply text-primary hover:underline; }
  .label { @apply block mb-1 text-sm font-medium; }
  .input { @apply w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring; }

  /* Buttons */
  .btn-primary { @apply inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring; }
  .btn-secondary { @apply inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring; }
  .btn-outline { @apply inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium transition hover:bg-accent/10; }
  .btn-hero { @apply inline-flex items-center justify-center rounded-md bg-gradient-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-md hover:opacity-95; }
  .btn-hero-sm { @apply inline-flex items-center justify-center rounded-md bg-gradient-primary px-3 py-1.5 text-sm font-semibold text-primary-foreground shadow-md hover:opacity-95; }
  .btn-hero-invert { @apply inline-flex items-center justify-center rounded-md bg-background px-5 py-2.5 text-sm font-semibold text-foreground shadow-md hover:opacity-95; }
  .btn-outline-invert { @apply inline-flex items-center justify-center rounded-md border px-5 py-2.5 text-sm font-semibold text-primary-foreground hover:bg-foreground-soft; border-color: hsl(var(--primary-foreground) / 0.4); }
  .btn-fab { @apply inline-flex items-center gap-2 rounded-full bg-gradient-primary text-primary-foreground px-5 py-3 shadow-lg hover:opacity-95; }
  .btn-sm { @apply px-3 py-1.5 text-xs; }
  .icon-btn { @apply inline-flex items-center justify-center rounded-md border px-2 py-1 text-sm hover:bg-accent/10; }
}

@layer utilities {
  .bg-gradient-primary { background-image: var(--gradient-primary); }
  .shadow-elevated { box-shadow: var(--shadow-elevated); }
  .text-gradient-primary { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .bg-foreground-soft { background-color: hsl(var(--primary-foreground) / 0.1); }
}