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

/* =============================================================================
   Design System — Municipalité de Cascapédia-St-Jules
   Inspired by traditional Quebec municipal identity: deep navy + warm cream.
   All colors are HSL. Never hardcode colors in components.
   ============================================================================= */

@layer base {
  :root {
    /* Brand surfaces */
    --background: 38 30% 97%;            /* Warm off-white / cream */
    --foreground: 222 45% 11%;           /* Deep navy text */

    --surface-cream: 38 35% 95%;
    --surface-warm: 36 40% 92%;

    /* Cards & popovers */
    --card: 0 0% 100%;
    --card-foreground: 222 45% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 45% 11%;

    /* Primary — institutional navy (matches Wix #0d1b3d-ish) */
    --primary: 222 65% 14%;
    --primary-foreground: 38 30% 97%;
    --primary-hover: 222 60% 22%;

    /* Secondary — softer navy for supporting elements */
    --secondary: 222 35% 25%;
    --secondary-foreground: 38 30% 97%;

    /* Accent — warm muted gold for highlights / hover */
    --accent: 38 55% 55%;
    --accent-foreground: 222 65% 14%;

    /* Muted */
    --muted: 38 20% 90%;
    --muted-foreground: 222 15% 38%;

    --destructive: 0 70% 45%;
    --destructive-foreground: 38 30% 97%;

    /* Borders */
    --border: 38 20% 85%;
    --input: 38 20% 85%;
    --ring: 222 65% 14%;

    --radius: 0.25rem;

    /* Topbar / header dark navy band */
    --bar: 222 65% 14%;
    --bar-foreground: 38 30% 97%;
    --bar-muted-foreground: 38 20% 75%;

    /* Footer */
    --footer: 222 70% 11%;
    --footer-foreground: 38 30% 95%;
    --footer-muted-foreground: 222 15% 65%;

    /* Sidebar (shadcn defaults retained) */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --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%;
  }

  .dark {
    --background: 222 65% 8%;
    --foreground: 38 30% 95%;

    --card: 222 55% 12%;
    --card-foreground: 38 30% 95%;

    --popover: 222 55% 12%;
    --popover-foreground: 38 30% 95%;

    --primary: 38 30% 95%;
    --primary-foreground: 222 65% 14%;
    --primary-hover: 38 35% 88%;

    --secondary: 222 35% 22%;
    --secondary-foreground: 38 30% 95%;

    --accent: 38 55% 55%;
    --accent-foreground: 222 65% 14%;

    --muted: 222 35% 18%;
    --muted-foreground: 38 15% 65%;

    --destructive: 0 60% 40%;
    --destructive-foreground: 38 30% 95%;

    --border: 222 35% 22%;
    --input: 222 35% 22%;
    --ring: 38 30% 95%;

    --bar: 222 75% 6%;
    --bar-foreground: 38 30% 95%;
    --bar-muted-foreground: 38 15% 70%;

    --footer: 222 80% 5%;
    --footer-foreground: 38 30% 95%;
    --footer-muted-foreground: 222 15% 60%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-feature-settings: "kern", "liga", "calt";
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
    letter-spacing: -0.01em;
  }
}

@layer utilities {
  /* Subtle paper-like band used for section transitions in the Wix original */
  .bg-band-cream {
    background:
      linear-gradient(to bottom, hsl(var(--surface-warm)) 0%, hsl(var(--background)) 100%);
  }

  .text-balance {
    text-wrap: balance;
  }
}
