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

@layer base {
  :root {
    /* Marque CCFN — violet #8d40ee */
    --brand: 267 84% 59%;
    --brand-dark: 267 72% 44%;
    --brand-deep: 268 60% 16%;

    --background: 267 30% 98%;
    --foreground: 268 35% 12%;
    --card: 0 0% 100%;
    --card-foreground: 268 35% 12%;
    --primary: 267 84% 59%;
    --primary-foreground: 0 0% 100%;
    --secondary: 267 40% 95%;
    --secondary-foreground: 268 35% 18%;
    --muted: 267 30% 96%;
    --muted-foreground: 265 12% 46%;
    --accent: 267 60% 96%;
    --accent-foreground: 267 72% 40%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 267 25% 90%;
    --input: 267 25% 88%;
    --ring: 267 84% 59%;
    --radius: 0.75rem;

    /* Barre latérale */
    --sidebar: 268 55% 12%;
    --sidebar-foreground: 267 30% 96%;
    --sidebar-muted: 265 20% 68%;
    --sidebar-border: 267 30% 22%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
  }

  /* Ascenseurs discrets teintés marque */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 9999px;
    background-color: hsl(var(--brand) / 0.3);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--brand) / 0.55);
  }
}

@layer utilities {
  /* Trame de fond très légère (login, pages vides) */
  .brand-grid {
    background-image:
      linear-gradient(to right, hsl(var(--brand) / 0.07) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--brand) / 0.07) 1px, transparent 1px);
    background-size: 36px 36px;
  }

  /* Alias conservé pour compatibilité */
  .login-grid {
    background-image:
      linear-gradient(to right, hsl(var(--brand) / 0.07) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--brand) / 0.07) 1px, transparent 1px);
    background-size: 36px 36px;
  }

  .brand-dots {
    background-image: radial-gradient(
      hsl(0 0% 100% / 0.16) 1px,
      transparent 1px
    );
    background-size: 22px 22px;
  }

  .brand-gradient {
    background-image: linear-gradient(
      135deg,
      hsl(267 84% 62%) 0%,
      hsl(275 78% 52%) 50%,
      hsl(258 82% 46%) 100%
    );
  }

  .brand-gradient-text {
    background-image: linear-gradient(
      100deg,
      hsl(267 84% 62%),
      hsl(288 80% 62%)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .sidebar-gradient {
    background-image: linear-gradient(
      170deg,
      hsl(268 52% 14%) 0%,
      hsl(268 58% 10%) 55%,
      hsl(258 60% 12%) 100%
    );
  }

  .glass-card {
    background-color: hsl(0 0% 100% / 0.9);
    backdrop-filter: blur(18px);
  }

  /* Fond sombre de la page d’authentification */
  .auth-backdrop {
    background-color: hsl(268 58% 7%);
    background-image:
      radial-gradient(
        60% 55% at 15% 10%,
        hsl(267 84% 45% / 0.38) 0%,
        transparent 60%
      ),
      radial-gradient(
        50% 50% at 88% 85%,
        hsl(292 70% 42% / 0.3) 0%,
        transparent 62%
      ),
      linear-gradient(175deg, hsl(268 52% 11%) 0%, hsl(266 60% 6%) 100%);
  }

  /* Carte en verre dépoli sur fond sombre */
  .auth-card {
    background-color: hsl(268 45% 12% / 0.72);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.07),
      0 32px 80px -32px hsl(268 80% 4% / 0.9);
  }

  /* Champ de saisie adapté au fond sombre */
  .auth-field {
    background-color: hsl(268 40% 16% / 0.6);
    border-color: hsl(267 30% 100% / 0.12);
    color: hsl(267 30% 97%);
  }

  .auth-field::placeholder {
    color: hsl(265 20% 62%);
  }

  .auth-field:focus-visible {
    border-color: hsl(var(--brand) / 0.6);
    background-color: hsl(268 40% 18% / 0.75);
  }

  /* Liseré dégradé en haut de la carte */
  .auth-hairline {
    background-image: linear-gradient(
      to right,
      transparent 0%,
      hsl(267 84% 65% / 0.9) 35%,
      hsl(292 80% 70% / 0.9) 65%,
      transparent 100%
    );
  }

  .shadow-brand {
    box-shadow:
      0 18px 40px -18px hsl(var(--brand) / 0.45),
      0 2px 8px -2px hsl(var(--brand) / 0.2);
  }
}