/* ===================================================================
   SOLUTEAM — Design tokens (compatibles shadcn/ui + Tailwind v3)
   -------------------------------------------------------------------
   Valeurs HSL en composantes séparées (sans hsl()), comme l'exige
   shadcn : la couleur s'utilise via hsl(var(--token)).
   À coller dans src/index.css (remplace les blocs :root / .dark).
   Police : Bricolage Grotesque (display) + Inter (texte).
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces & texte */
  --background: 45 33% 98%;          /* paper      #FBFAF7 */
  --foreground: 221 57% 13%;         /* ink        #0E1A33 */
  --card: 0 0% 100%;                 /* blanc      #FFFFFF */
  --card-foreground: 221 57% 13%;
  --popover: 0 0% 100%;
  --popover-foreground: 221 57% 13%;

  /* Action principale = teal (boutons CTA) */
  --primary: 172 66% 50%;            /* teal       #2DD4BF */
  --primary-foreground: 221 57% 13%; /* texte ink sur teal */

  /* Surfaces secondaires / atténuées */
  --secondary: 38 38% 92%;           /* paper-2    #F2ECE2 */
  --secondary-foreground: 221 57% 13%;
  --muted: 38 38% 92%;
  --muted-foreground: 222 15% 40%;   /* mute       #586176 */
  --accent: 39 26% 87%;              /* line/hover #E7E1D6 */
  --accent-foreground: 221 57% 13%;

  /* Sémantique */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;

  /* Bordures & focus */
  --border: 39 26% 87%;              /* line       #E7E1D6 */
  --input: 39 26% 87%;
  --ring: 172 66% 50%;               /* teal */

  --radius: 0.75rem;

  /* ---- Couleurs de marque (usage intentionnel : accents, dualité) ---- */
  --brand-ink: 221 57% 13%;          /* #0E1A33 */
  --brand-ink-700: 221 52% 16%;      /* #14223F */
  --brand-ink-600: 219 38% 21%;      /* #1B2E52 */
  --brand-amber: 29 86% 67%;         /* #F4A862  — l'Humain  */
  --brand-amber-600: 29 78% 56%;     /* #E68A36 */
  --brand-teal: 172 66% 50%;         /* #2DD4BF  — l'IA      */
  --brand-teal-600: 173 79% 40%;     /* #15B5A2 */
  --brand-paper: 45 33% 98%;         /* #FBFAF7 */
  --brand-paper-2: 38 38% 92%;       /* #F2ECE2 */
}

.dark {
  --background: 221 57% 13%;          /* ink */
  --foreground: 45 33% 98%;           /* paper */
  --card: 221 52% 16%;               /* ink-700 */
  --card-foreground: 45 33% 98%;
  --popover: 221 52% 16%;
  --popover-foreground: 45 33% 98%;

  --primary: 172 66% 50%;            /* teal */
  --primary-foreground: 221 57% 13%;

  --secondary: 219 38% 21%;          /* ink-600 */
  --secondary-foreground: 45 33% 98%;
  --muted: 219 38% 21%;
  --muted-foreground: 220 16% 71%;   /* mute-light #A8B0C0 */
  --accent: 219 38% 21%;
  --accent-foreground: 45 33% 98%;

  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 98%;

  --border: 219 30% 24%;
  --input: 219 30% 24%;
  --ring: 172 66% 50%;

  /* Marque : identiques en dark (amber/teal restent lisibles) */
  --brand-ink: 221 57% 13%;
  --brand-ink-700: 221 52% 16%;
  --brand-ink-600: 219 38% 21%;
  --brand-amber: 29 86% 67%;
  --brand-amber-600: 29 78% 56%;
  --brand-teal: 172 66% 50%;
  --brand-teal-600: 173 79% 40%;
  --brand-paper: 45 33% 98%;
  --brand-paper-2: 38 38% 92%;
}

/* Familles de police utilitaires (si tu ne passes pas par Tailwind) */
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }