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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    /* JOLI Matelas bleu principal #003D82 */
    --primary: 210 100% 25.5%;
    --primary-foreground: 0 0% 100%;
    /* JOLI Matelas bleu clair #4A90E2 */
    --secondary: 210 78% 58%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    /* JOLI Matelas or #C9A65C */
    --accent: 43 43% 58%;
    --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: 210 100% 25.5%;
    --radius: 0.5rem;
    --success: 142.1 76.2% 36.3%;
  }
}

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

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
  }
  .btn-default {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2;
  }
  .btn-destructive {
    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-4 py-2;
  }
  .btn-outline {
    @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2;
  }
  .btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2;
  }
  .btn-ghost {
    @apply hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2;
  }
  .btn-link {
    @apply text-primary underline-offset-4 hover:underline h-10 px-4 py-2;
  }
  .btn-sm {
    @apply h-9 rounded-md px-3;
  }
  .btn-lg {
    @apply h-11 rounded-md px-8;
  }
  .btn-icon {
    @apply h-10 w-10 p-0;
  }

  /* Cards */
  .card {
    @apply rounded-lg border bg-card text-card-foreground shadow-sm;
  }
  .card-header {
    @apply flex flex-col space-y-1.5 p-6;
  }
  .card-title {
    @apply text-2xl font-semibold leading-none tracking-tight;
  }
  .card-description {
    @apply text-sm text-muted-foreground;
  }
  .card-content {
    @apply p-6 pt-0;
  }
  .card-footer {
    @apply flex items-center p-6 pt-0;
  }

  /* Inputs */
  .input {
    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Select */
  .select {
    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors;
  }
  .badge-default {
    @apply border-transparent bg-primary text-primary-foreground;
  }
  .badge-secondary {
    @apply border-transparent bg-secondary text-secondary-foreground;
  }
  .badge-destructive {
    @apply border-transparent bg-destructive text-destructive-foreground;
  }
  .badge-outline {
    @apply text-foreground;
  }
  .badge-success {
    @apply border-transparent bg-green-500 text-white;
  }

  /* Spinner */
  .spinner {
    @apply animate-spin rounded-full border-primary border-t-transparent;
  }
  .spinner-sm {
    @apply h-4 w-4 border-2;
  }
  .spinner-md {
    @apply h-8 w-8 border-2;
  }
  .spinner-lg {
    @apply h-12 w-12 border-[3px];
  }
}

/* Custom HSL color utilities */
.bg-primary { background-color: hsl(210 100% 25.5%); }
.text-primary { color: hsl(210 100% 25.5%); }
.bg-primary-foreground { background-color: hsl(0 0% 100%); }
.text-primary-foreground { color: hsl(0 0% 100%); }

.bg-secondary { background-color: hsl(210 78% 58%); }
.text-secondary { color: hsl(210 78% 58%); }

.bg-accent { background-color: hsl(43 43% 58%); }
.text-accent { color: hsl(43 43% 58%); }

.bg-muted { background-color: hsl(210 40% 96.1%); }
.text-muted-foreground { color: hsl(215.4 16.3% 46.9%); }

.bg-destructive { background-color: hsl(0 84.2% 60.2%); }
.text-destructive { color: hsl(0 84.2% 60.2%); }

.border-border { border-color: hsl(214.3 31.8% 91.4%); }
.border-input { border-color: hsl(214.3 31.8% 91.4%); }

.bg-background { background-color: hsl(0 0% 100%); }
.text-foreground { color: hsl(222.2 84% 4.9%); }

.bg-card { background-color: hsl(0 0% 100%); }
.text-card-foreground { color: hsl(222.2 84% 4.9%); }

/* JOLI Brand Colors */
.bg-joli-blue-primary { background-color: #003D82; }
.text-joli-blue-primary { color: #003D82; }
.bg-joli-blue-secondary { background-color: #4A90E2; }
.text-joli-blue-secondary { color: #4A90E2; }
.bg-joli-gold-primary { background-color: #C9A65C; }
.text-joli-gold-primary { color: #C9A65C; }

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(to bottom right, #003D82, rgba(0, 61, 130, 0.95), #4A90E2);
}
.bg-gradient-accent {
  background: linear-gradient(to bottom right, #C9A65C, rgba(201, 166, 92, 0.8));
}
.bg-gradient-primary-to-secondary {
  background: linear-gradient(to right, #003D82, #4A90E2, #003D82);
}