/* Perceo — jetons de design.
   Un seul endroit où les couleurs se décident. Tout le reste en dérive.
   Direction « chaud & sobre » : crème, prune, un seul vert. Du relief, pas de plat. */

:root {
  color-scheme: light;

  /* Fonds — du plus clair au plus profond */
  --creme:        #FAF7F4;
  --panneau:      #F3EDE8;
  --haut:         #EAE2DB;
  --carte:        #FFFFFF;
  --trait:        #E2D8D0;
  --trait-fort:   #D3C6BC;

  /* Encres */
  --encre:        #241C22;
  --gris:         #6B5F63;
  --gris-clair:   #8C7F84;

  /* Prune — la seule couleur d'action */
  --prune:        #4A2C63;
  --prune-fonce:  #351F47;
  --prune-clair:  #6B527F;
  --prune-pale:   #EDE4F2;
  --sur-prune:    #FFFFFF;

  /* Vert — réservé à l'enregistrement et aux états réussis */
  --vert:         #1E7A5A;
  --vert-fonce:   #14614A;
  --vert-pale:    #E4F0EA;

  /* États */
  --ambre:        #A65B18;
  --ambre-pale:   #F7ECDF;
  --rouge:        #B3261E;

  /* Reliefs — c'est ce qui empêche la page d'être plate.
     Ombres chaudes, jamais du noir pur. */
  --relief-1: 0 1px 2px rgba(58, 40, 30, .05), 0 1px 1px rgba(58, 40, 30, .04);
  --relief-2: 0 2px 4px rgba(58, 40, 30, .05), 0 6px 14px rgba(58, 40, 30, .06);
  --relief-3: 0 4px 8px rgba(58, 40, 30, .06), 0 16px 32px rgba(58, 40, 30, .09);
  --relief-4: 0 8px 16px rgba(58, 40, 30, .07), 0 32px 64px rgba(58, 40, 30, .12);
  --relief-prune: 0 2px 6px rgba(74, 44, 99, .22), 0 10px 24px rgba(74, 44, 99, .18);

  /* Dégradés très bas en contraste — du volume, pas du spectacle */
  --nappe-chaude: linear-gradient(180deg, #FDFBF9 0%, #F5EFEA 100%);
  --nappe-panneau: linear-gradient(165deg, #FFFFFF 0%, #F7F2ED 100%);
  --nappe-prune: linear-gradient(160deg, #57356F 0%, #3B2350 100%);
  /* Le grand bloc de résultat : même famille, son propre texte. */
  --bloc-prune: linear-gradient(160deg, #57356F 0%, #35204A 100%);
  --sur-bloc:   #FFFFFF;

  /* Typographie */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-md:  1rem;
  --t-lg:  1.0625rem;
  --t-xl:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --t-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  --t-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);

  /* Espacement */
  --e1: 0.25rem; --e2: 0.5rem;  --e3: 0.75rem; --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4rem;
  --e9: 5.5rem;  --e10: 7rem;

  /* Rayons */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-plein: 999px;

  /* Mouvement */
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --rapide: 140ms;
  --normal: 260ms;

  /* Mise en page */
  --largeur: 1180px;
  --marge: clamp(1rem, 4vw, 2.5rem);
  --entete-h: 68px;

  --z-collant: 100;
  --z-voile:   900;
  --z-modale:  1000;
}

/* Sombre : mêmes rôles, valeurs inversées. Aucune couleur n'est définie
   uniquement ici — chacune a déjà sa valeur claire au-dessus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --creme: #191317; --panneau: #211A20; --haut: #2A222A; --carte: #262029;
    --trait: #3B313C; --trait-fort: #4B404D;
    --encre: #F0EAE7; --gris: #A79AA0; --gris-clair: #8C8189;
    --prune: #C4A7E0; --prune-fonce: #D8C3EC; --prune-clair: #9C7EBA;
    --prune-pale: #33243F; --sur-prune: #1A1017;
    --vert: #6FC3A2; --vert-fonce: #8FD6BA; --vert-pale: #1B3A30;
    --ambre: #E0A06A; --ambre-pale: #3A2A1B; --rouge: #E8837C;
    --relief-1: 0 1px 2px rgba(0, 0, 0, .34);
    --relief-2: 0 2px 4px rgba(0, 0, 0, .34), 0 6px 14px rgba(0, 0, 0, .3);
    --relief-3: 0 4px 8px rgba(0, 0, 0, .36), 0 16px 32px rgba(0, 0, 0, .38);
    --relief-4: 0 8px 16px rgba(0, 0, 0, .4), 0 32px 64px rgba(0, 0, 0, .46);
    --relief-prune: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .34);
    --nappe-chaude: linear-gradient(180deg, #1D161B 0%, #15100F 100%);
    --nappe-panneau: linear-gradient(165deg, #2A222C 0%, #201A21 100%);
    --nappe-prune: linear-gradient(160deg, #D3BBE9 0%, #B091D2 100%);
  --bloc-prune: linear-gradient(160deg, #3A2A48 0%, #241830 100%);
  --sur-bloc:   #F0EAE7;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --creme: #191317; --panneau: #211A20; --haut: #2A222A; --carte: #262029;
  --trait: #3B313C; --trait-fort: #4B404D;
  --encre: #F0EAE7; --gris: #A79AA0; --gris-clair: #8C8189;
  --prune: #C4A7E0; --prune-fonce: #D8C3EC; --prune-clair: #9C7EBA;
  --prune-pale: #33243F; --sur-prune: #1A1017;
  --vert: #6FC3A2; --vert-fonce: #8FD6BA; --vert-pale: #1B3A30;
  --ambre: #E0A06A; --ambre-pale: #3A2A1B; --rouge: #E8837C;
  --relief-1: 0 1px 2px rgba(0, 0, 0, .34);
  --relief-2: 0 2px 4px rgba(0, 0, 0, .34), 0 6px 14px rgba(0, 0, 0, .3);
  --relief-3: 0 4px 8px rgba(0, 0, 0, .36), 0 16px 32px rgba(0, 0, 0, .38);
  --relief-4: 0 8px 16px rgba(0, 0, 0, .4), 0 32px 64px rgba(0, 0, 0, .46);
  --relief-prune: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .34);
  --nappe-chaude: linear-gradient(180deg, #1D161B 0%, #15100F 100%);
  --nappe-panneau: linear-gradient(165deg, #2A222C 0%, #201A21 100%);
  --nappe-prune: linear-gradient(160deg, #D3BBE9 0%, #B091D2 100%);
  --bloc-prune: linear-gradient(160deg, #3A2A48 0%, #241830 100%);
  --sur-bloc:   #F0EAE7;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}