/* ===================================================================
 *  Design tokens – v1 (Sprint 6-A)
 *  Toutes les nouvelles feuilles doivent importer CE fichier en tête
 * =================================================================== */

/* Global UA reset */
:where(html, body) {
  margin: 0;
  padding: 0;
}


:root {
  /* z-index harmonisés */
  --z-chat: 10010;
  --z-overlay: 9000;
  --z-modal: 11000;

  /* overlays */
  --overlay-bg: rgb(10 12 16 / 55%);

  /* radius normalisés */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  /* === Neutres (système) ==================================== */
  --clr-white: #fff;
  --white-rgb: 255 255 255;
  --clr-neutral-100: #f5f5f5;
  --clr-neutral-200: #e5e7eb;
  --clr-neutral-300: #d1d5db; /* (gardé, repositionné) */
  --clr-neutral-400: #9ca3af;
  --clr-neutral-500: #6b7280;
  --clr-neutral-600: #4b5563;
  --clr-neutral-700: #374151;
  --clr-neutral-800: #1f2937;
  --clr-neutral-900: #111827;

  /* couleurs / dégradés communs */
  --ml-grad: linear-gradient(90deg, var(--primary-600, #4c5578), var(--primary-600, #4c5578));
  --ml-border: 0.1875rem solid var(--primary-600, #4c5578);
  /* brand gold (from logo) */
  --brand-gold: #E3B333;
  --brand-gold-dark: #8C6B1F;

  /* Alias éventuels pour la base existante */
  --primary-grad: var(--ml-grad);
  --primary-border: var(--ml-border);
  --color-bg: var(--surface-1);
  --color-text: var(--on-surface);
  --color-white: #fff;
  --color-primary-gradient: var(--primary-grad);

  /* Dock */
  --z-dock: 2500;

  /* Focus / accessibilité */
  --focus-outline: var(--focus-ring);

  /* Verre & bordures */
  --glass-border: 1px solid rgb(255 255 255 / 28%);
  --glass-blur: 12px;

  /* === Blur génériques ====================================== */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 18px;

  /* États */
  --clr-success: #00e676;

  /* Couleurs principales */
  --clr-accent: var(--accent-mint, #96d8bb);
  --clr-accent-rgb: 150, 216, 187;

  /* Rayons */
  --radius: 0.75rem; /* Rayon de bordure standard */

  /* Ombres (avec pourcentages) */
  --shadow-s: 0 2px 4px rgb(0 0 0 / 6%); /* Ombre petite intensité */
  --shadow-m: 0 4px 12px rgb(0 0 0 / 5%); /* Ombre moyenne */
  --shadow-l: 0 8px 24px rgb(0 0 0 / 12%); /* Ombre large */
  --shadow-xl: 0 12px 28px rgb(0 0 0 / 16%); /* Ombre extra-large */
  --shadow-medium: var(--shadow-m);
  --shadow-strong: var(--shadow-xl);

  /* Surfaces (transparences) */
  --clr-surface-glass:
    rgb(
      255 255 255 / 18%
    ); /* Pour effets “glass-morphisme” */

  --surface-card: rgb(255 255 255 / 40%); /* Surface de carte */
  --on-surface: #1c2452; /* Couleur du contenu sur surface */
  --clr-on-surface-soft: #64748b; /* Couleur de texte plus douce */

  /* Rayons supplémentaires */
  --radius-xl: 1.25rem; /* Rayon extra-large */
  --radius-large: var(--radius-xl);
  --radius-small: var(--radius-sm);

  /* Breakpoints */
  --bp-tablet: 48rem; /* 768 px */
  --bp-desktop: 64rem; /* 1024 px */

  /* Header */
  --hdr-height: 4.5rem; /* desktop */
  --hdr-height-sm: 3.75rem; /* ≤ 768 px */
  --hdr-blur: 18px;

  /* Progress bars */
  --bar-h: 0.625rem;
  --bar-radius: 0.3125rem;
  --bar-bg: #e0e0e0;
  /* Tokens (coins): gold gradient fallback */
  --bar-grad-token: linear-gradient(90deg, #E3B333, #8C6B1F);
  /* Matière grise: neutral gray fallback */
  --bar-grad-grise: linear-gradient(90deg, #8E8E8E, #4B4B4B);

  /* Dock */
  --bottom-dock-h: 3.5rem; /* hauteur mini du dock */
  --bottom-dock-gap: 0.5rem; /* marge visuelle bas/écran */

  /* === AURORA (theme) =============================================== */

  /* Palette violet → cyan, plus sage et moderne */
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
  --brand-800: #5b21b6;
  --brand-900: #4c1d95;
  /* Centralized accent background: solid violet for consistent, accessible contrast */
  --accent-grad: linear-gradient(0deg, #6d28d9, #6d28d9);
  --brand-grad: var(--ml-grad);
  --brand-600-rgb: 124 58 237;
  /* neutralize any violet glows */
  --shadow-violet-s: 0 4px 14px rgb(17 20 24 / 10%);
  --shadow-violet-m: 0 8px 22px rgb(17 20 24 / 14%);

  /* Surfaces “glass” */
  /* Soft neutral paper-like background */
  --surface-1: linear-gradient(135deg, #f9fafb, #e2e8f0);
  /* Subtle container surface (near-white) */
  --surface-2: linear-gradient(180deg, #ffffff, #f3f4f6);
  --backdrop: blur(18px) saturate(120%);

  /* Typo */
  --font-ui:
    Raleway,
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    roboto,
    helvetica,
    arial,
    sans-serif;
  --font-math: "STIX Two Math", "XITS Math", "Latin Modern Math", serif;
  --font-heading: "Roboto Slab", var(--font-ui), serif;
  /* Alias de migration (optionnels mais pratiques) */
  --font-primary: var(--font-ui);
  --font-title: var(--font-heading);

  /* Rayons / ombres / focus */
  --elev-1: 0 4px 14px rgb(0 0 0 / 10%);
  --elev-2: 0 8px 24px rgb(0 0 0 / 14%);
  /* focus ring neutral gray */
  --focus-ring: 0 0 0 0.2rem rgb(0 0 0 / 28%);

  /* Avatars */
--avatar-bot: url("/static/images/avatar-bot.png");
--avatar-user: url("/static/images/avatar-user.png");
}

/* === Galet (pierre claire convexe) =============================== */
:root{
  /* Fonds */
  --galet-bg: radial-gradient(120% 140% at 50% 0%,
                 rgba(255,255,255,.96) 0%,
                 rgba(246,246,255,.90) 42%,
                 rgba(238,240,255,.84) 70%,
                 rgba(230,232,248,.82) 100%
               ) padding-box,
               linear-gradient(135deg,
                 rgba(170,150,255,.14),
                 rgba(120,200,255,.10)
               ) padding-box;

  --galet-bg-bright: radial-gradient(120% 140% at 50% 0%,
                         rgba(255,255,255,.98) 0%,
                         rgba(248,248,255,.94) 42%,
                         rgba(240,242,255,.90) 70%,
                         rgba(235,236,250,.88) 100%
                       ) padding-box,
                       linear-gradient(135deg,
                         rgba(170,150,255,.16),
                         rgba(120,200,255,.12)
                       ) padding-box;

  /* Bordure & ombres */
  --galet-border: 1px solid rgba(255,255,255,.55);
  --galet-shadow: 0 10px 22px rgba(20,24,40,.18),
                  inset 0 1px 0 rgba(255,255,255,.92),
                  inset 0 -8px 18px rgba(70,60,140,.12);
  --galet-shadow-strong: 0 18px 36px rgba(20,24,40,.26),
                         inset 0 1px 0 rgba(255,255,255,.97),
                         inset 0 -12px 24px rgba(70,60,140,.16);

  /* Variante “mini” (boutons ronds, languettes) */
  --galet-mini-shadow: 0 6px 14px rgba(20,24,40,.18),
                       inset 0 1px 0 rgba(255,255,255,.92),
                       inset 0 -6px 12px rgba(70,60,140,.10);
}