/* Jetons de la charte Qellio v1 (16/09/2026), recopiés de ~/Documents/Qellio/DESIGN.md, sections 2 à 7.
   Seul fichier du site qui porte des valeurs de couleur, de police, d'espacement et de mouvement. */

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-var.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Marque */
  --marque-violet: #7550A3;
  --marque-violet-logo: #9C75DC;
  --marque-peche: #EAB784;
  --marque-lavande: #DBC1F1;

  /* Neutres */
  --neutre-creme: #FAF8F4;
  --neutre-blanc: #FFFFFF;
  --neutre-brume: #E4D9EC;
  --neutre-gris-prune: #6B6274;
  --neutre-encre: #27242D;
  --neutre-nuit: #19161F;

  /* Activités */
  --acquisition-violet-profond: #513479;
  --acquisition-lavande-pale: #F1EAF8;
  --acquisition-lilas: #CDBBE0;
  --ia-brun-peche: #805A39;
  --ia-peche-pale: #F9EEE1;
  --ia-sable: #ECD3B3;

  /* États */
  --etat-succes: #1F6B4D;
  --etat-succes-fond: #E3F1E9;
  --etat-information: #3F56A6;
  --etat-information-fond: #E6EAF8;
  --etat-attention: #8A5A1F;
  --etat-attention-fond: #FBEEDC;
  --etat-erreur: #A1322F;
  --etat-erreur-fond: #F8E7E5;

  /* Dégradés et fonds */
  --degrade-sombre: linear-gradient(132deg, #73528F 0%, #4C365F 26%, #2B2235 58%, #19161F 100%);
  --degrade-soulignement: linear-gradient(90deg, #BA9ADB 0%, #EAB784 100%);
  --degrade-fil: linear-gradient(180deg, #9C75DC 0%, #B98FD6 33%, #DCAE98 66%, #EAB784 100%);
  --degrade-carte-forte-acquisition: linear-gradient(130deg, #65418D 0%, #8055AD 100%);
  --degrade-carte-forte-ia: linear-gradient(140deg, #F9E4CB 0%, #F3D5B2 100%);
  --fond-creme-nappes:
    radial-gradient(60% 50% at 0% 0%, #F1EAF8 0%, rgba(241, 234, 248, 0) 100%),
    radial-gradient(60% 50% at 100% 100%, #F9EEE1 0%, rgba(249, 238, 225, 0) 100%),
    #FAF8F4;

  /* Typographie */
  --font-titres: 'Outfit', 'Avenir Next', 'Century Gothic', 'Segoe UI', Arial, sans-serif;
  --font-texte: 'Public Sans', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --font-donnees: 'Space Grotesk', 'DIN Alternate', Bahnschrift, Arial, sans-serif;

  /* Espacements */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 64px;
  --espace-9: 96px;
  --largeur-contenu: 1192px;
  --largeur-lecture: 720px;

  /* Rayons */
  --rayon-etiquette: 8px;
  --rayon-bouton: 12px;
  --rayon-ticket: 16px;
  --rayon-carte: 18px;
  --rayon-solution: 26px;
  --rayon-panneau: 32px;
  --rayon-pilule: 9999px;

  /* Ombres */
  --ombre-plat: none;
  --ombre-pose: 0 26px 48px -40px rgba(39, 36, 45, .45);
  --ombre-flottant: 0 44px 80px -40px rgba(39, 36, 45, .34);
  --ombre-colore: 0 16px 30px -16px rgba(81, 52, 121, .7);

  /* Mouvement */
  --courbe: cubic-bezier(.2, .7, .2, 1);
  --duree-survol: .2s;
  --duree-apparition: .8s;

  /* Rôles : ce qui change sur le sombre */
  --texte: var(--neutre-encre);
  --texte-second: var(--neutre-gris-prune);
  --lien: var(--marque-violet);
  --focus: var(--marque-violet);
  --mot-cle: var(--marque-violet);
}

[data-theme="sombre"], .q-panneau {
  --texte: var(--neutre-creme);
  --texte-second: var(--neutre-brume);
  --lien: var(--marque-lavande);
  --focus: var(--marque-lavande);
  --mot-cle: var(--marque-lavande);
}