/* ==========================================================================
   WHISP — Design tokens
   Langage visuel inspiré de Material / Google Drive : fond clair, surfaces
   plates, ombres très douces, formes très arrondies, accents colorés.
   Source unique de vérité — aucune valeur brute ailleurs dans le CSS.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Palette
     Rampe bleue : logo Whisp (#1478f0) recalibrée sur les valeurs Material,
     de façon à cohabiter avec les gris Google sans jurer. */
  --blue-50:  #f0f5fe;
  --blue-100: #d3e3fd;   /* conteneur tonal — boutons secondaires */
  --blue-200: #a8c7fa;
  --blue-300: #7cacf8;
  --blue-400: #4285f4;   /* bleu « produit » */
  --blue-500: #1a73e8;
  --blue-600: #0b57d0;   /* primaire des actions */
  --blue-700: #0842a0;
  --blue-800: #062e6f;
  --blue-900: #041e49;
  --blue-950: #02132e;

  /* Accents colorés — utilisés par petites touches (icônes, illustrations),
     jamais en aplats larges, pour rester sobre. */
  --red-400:    #ea4335;
  --yellow-400: #fbbc04;
  --green-400:  #34a853;
  --green-600:  #188038;
  --teal-400:   #00acc1;
  --purple-400: #a142f4;

  /* Gris Material : neutres légèrement chauds, jamais bleutés. */
  --grey-950: #131314;
  --grey-900: #1f1f1f;
  --grey-800: #282a2c;
  --grey-700: #3c4043;
  --grey-600: #444746;
  --grey-500: #5f6368;
  --grey-400: #80868b;
  --grey-300: #c4c7c5;
  --grey-200: #dadce0;
  --grey-150: #e8eaed;
  --grey-100: #f0f4f9;   /* surface « rail » de Drive */
  --grey-50:  #f8fafd;   /* fond de page tramé */

  /* ------------------------------------------------------------ Typographie
     Google Sans si le système la possède, Roboto sinon : même squelette
     géométrique, même rythme. */
  --font-sans: "Google Sans Text", "Google Sans", Roboto, ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Google Sans", "Google Sans Display", Roboto, var(--font-sans);
  --font-mono: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Échelle fluide. Les titres Material sont grands mais peu contrastés en
     graisse : on monte en taille, pas en gras. */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --text-xl:   clamp(1.35rem, 0.8vw + 1.17rem, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.6vw + 1.39rem, 2.4rem);
  --text-3xl:  clamp(2.1rem, 2.6vw + 1.5rem, 3.25rem);
  --text-4xl:  clamp(2.5rem, 4vw + 1.6rem, 4rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.68;

  /* Crénage quasi neutre : Material ne resserre pas ses titres. */
  --tracking-tighter: -0.018em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.01em;
  --tracking-caps:    0.09em;

  /* ------------------------------------------------------------- Espacement */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5.5rem;
  --space-11: 7rem;
  --space-12: 9rem;

  --section-y: clamp(4rem, 8vw, 7.5rem);

  /* ---------------------------------------------------------------- Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ----------------------------------------------------------------- Formes
     Material 3 : des rayons francs, bien plus généreux qu'en Material 1. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* --------------------------------------------------------------- Mouvement
     Courbes Material : « standard » pour l'ordinaire, « emphasized » pour
     les transitions marquantes. Ni rebond ni élan exagéré. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 100ms;
  --dur: 200ms;
  --dur-slow: 400ms;
  --dur-slower: 700ms;

  /* --------------------------------------------------------------- Z-index */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* ==========================================================================
   Thème clair — thème par défaut du site.
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-subtle:     var(--grey-50);
  --bg-elevated:   #ffffff;

  /* « Surface » = aplat gris très clair, la signature de Drive. */
  --surface:       var(--grey-100);
  --surface-hover: var(--grey-150);
  --surface-solid: #ffffff;

  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
  --border-brand:  var(--blue-200);

  --text:           var(--grey-900);
  --text-secondary: var(--grey-600);
  --text-muted:     var(--grey-500);
  --text-faint:     var(--grey-400);
  --text-on-brand:  #ffffff;

  --brand:           var(--blue-600);
  --brand-hover:     var(--blue-700);
  --brand-solid:     var(--blue-600);
  --brand-container: var(--blue-100);   /* fond des boutons tonals */
  --on-brand-container: var(--blue-900);
  --brand-ghost:     var(--blue-50);

  /* Voiles colorés très dilués du haut de page. */
  --wash-a: rgba(66, 133, 244, 0.16);
  --wash-b: rgba(52, 168, 83, 0.12);
  --wash-c: rgba(251, 188, 4, 0.1);

  /* Élévations Google : deux couches, opacité faible, jamais de halo coloré. */
  --shadow-1: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --shadow-2: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --shadow-3: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3);
  --shadow-4: 0 6px 10px 4px rgba(60, 64, 67, 0.15), 0 2px 3px rgba(60, 64, 67, 0.3);

  /* Voile de survol Material, posé par-dessus la couleur du composant. */
  --state-hover: rgba(31, 31, 31, 0.06);
  --state-press: rgba(31, 31, 31, 0.1);
}

/* ==========================================================================
   Thème sombre — repris des valeurs sombres de Drive.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--grey-950);
  --bg-subtle:     #1b1b1b;
  --bg-elevated:   var(--grey-800);

  --surface:       var(--grey-800);
  --surface-hover: #35373a;
  --surface-solid: var(--grey-800);

  --border:        #444746;
  --border-strong: #5f6368;
  --border-brand:  var(--blue-700);

  --text:           #e3e3e3;
  --text-secondary: #c4c7c5;
  --text-muted:     #9aa0a6;
  --text-faint:     #80868b;
  --text-on-brand:  var(--blue-950);

  --brand:           var(--blue-200);
  --brand-hover:     var(--blue-100);
  --brand-solid:     var(--blue-200);
  --brand-container: #0842a0;
  --on-brand-container: var(--blue-100);
  --brand-ghost:     rgba(168, 199, 250, 0.12);

  --wash-a: rgba(66, 133, 244, 0.22);
  --wash-b: rgba(52, 168, 83, 0.14);
  --wash-c: rgba(251, 188, 4, 0.1);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-4: 0 6px 10px 4px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.6);

  --state-hover: rgba(227, 227, 227, 0.08);
  --state-press: rgba(227, 227, 227, 0.12);
}