/* ==========================================================================
   tokens.css — le vocabulaire visuel de Sassy
   --------------------------------------------------------------------------
   PARTI PRIS
   L'application a deux personnalités, et c'est délibéré.

   · Les écrans d'IDENTITÉ (connexion, accueil, galerie, page perso) assument
     le vocabulaire bling : Archivo Black énorme, rose saturé, ombres portées
     franches, cartes légèrement inclinées. C'est ce que fabrique l'atelier.

   · Le STUDIO est un instrument. Angles vifs, filets d'un pixel, aucune
     inclinaison, aucune ombre, chiffres en chasse fixe. Une planche de strass
     se mesure au dixième de millimètre : l'outil qui la dessine doit avoir
     l'air d'un pied à coulisse, pas d'un flyer.

   Le rose n'est pas une couleur de fond, c'est une COULEUR DE SIGNAL :
   mesure active, sélection, cote. Partout ailleurs, encre et papier.
   ========================================================================== */

:root {
  /* ── Palette ─────────────────────────────────────────────────────────── */
  --ink:        #17141A;   /* encre : texte, filets, bordures            */
  --ink-soft:   #4A444F;   /* texte secondaire                            */
  --ink-faint:  #8A828F;   /* légendes, unités, texte désactivé           */

  --paper:      #EFE7DC;   /* plan de travail, fond d'application         */
  --paper-warm: #E6DCCE;   /* creux, pistes de curseur, rails             */
  --surface:    #FFFFFF;   /* panneaux, feuille imprimée                  */
  --surface-2:  #F7F3ED;   /* panneau enfoncé, ligne alternée             */

  --hot:        #FF1F6D;   /* SIGNAL : mesure, sélection, action          */
  --hot-deep:   #C2004B;   /* survol, texte rose sur clair                */
  --hot-wash:   #FFE7F0;   /* fond de mise en avant                       */

  --glass:      #2BA6E0;   /* information, cotes, repères                 */
  --gold:       #E0A800;   /* avertissement : vérifie avant d'imprimer    */
  --alert:      #D62839;   /* erreur bloquante                            */
  --go:         #1F9D6B;   /* enregistré, valide                          */

  /* ── Typographie ─────────────────────────────────────────────────────── */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-ui:      'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* Les mesures sont en chasse fixe. Ce n'est pas un détail de style :
     c'est ce qui distingue « 182,4 mm » — une grandeur physique vérifiable
     à la règle — du reste de l'interface. Les colonnes de chiffres
     s'alignent, et l'œil compare sans effort. */
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono',
                  Menlo, Consolas, monospace;

  --step--2: 0.6875rem;   /* 11px — unités, légendes            */
  --step--1: 0.8125rem;   /* 13px — libellés de champ           */
  --step-0:  0.9375rem;   /* 15px — texte courant               */
  --step-1:  1.125rem;    /* 18px — sous-titres                 */
  --step-2:  1.5rem;      /* 24px — titres de section           */
  --step-3:  2.25rem;     /* 36px — titres de page              */
  --step-4:  clamp(2.75rem, 7vw, 4.5rem);   /* affiche          */

  /* ── Espacement : échelle de 4 px ────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

  /* ── Formes ──────────────────────────────────────────────────────────── */
  --r-sharp: 2px;    /* studio : presque vif                     */
  --r-soft:  10px;   /* cartes et champs                        */
  --r-bold:  16px;   /* écrans d'identité                       */
  --r-pill:  999px;

  --line:       1px solid var(--ink-faint);
  --line-faint: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  --line-bold:  3px solid var(--ink);

  /* Ombre portée franche, décalée : la signature graphique de la marque.
     Réservée aux écrans d'identité — le studio n'en porte aucune. */
  --drop-1: 3px 3px 0 var(--ink);
  --drop-2: 5px 5px 0 var(--ink);
  --drop-3: 8px 8px 0 var(--ink);

  --lift: 0 1px 2px rgb(23 20 26 / 0.06), 0 4px 14px rgb(23 20 26 / 0.08);

  /* ── Scène ───────────────────────────────────────────────────────────── */
  --stage-bg: #E4DBCF;

  /* ── Mouvement ───────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 120ms;
  --base: 200ms;

  --header-h: 56px;
  --rail-w: 288px;
}

/* ==========================================================================
   Mode sombre — l'atelier travaille aussi le soir.
   L'encre et le papier échangent leurs rôles ; le rose de signal est
   légèrement désaturé, sinon il vibre sur fond noir.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink:        #F2EDE6;
    --ink-soft:   #B2AAB8;
    --ink-faint:  #7C7482;

    --paper:      #14121A;
    --paper-warm: #1C1922;
    --surface:    #1F1B26;
    --surface-2:  #262130;

    --hot:        #FF4D86;
    --hot-deep:   #FF7BA6;
    --hot-wash:   #38182A;

    --glass:      #56BDEE;
    --gold:       #F0BE33;
    --alert:      #FF6B6B;
    --go:         #3FBE8B;

    --stage-bg:   #0E0C12;

    --drop-1: 3px 3px 0 #000;
    --drop-2: 5px 5px 0 #000;
    --drop-3: 8px 8px 0 #000;
    --lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.35);
  }
}

:root[data-theme='dark'] {
  --ink:        #F2EDE6;
  --ink-soft:   #B2AAB8;
  --ink-faint:  #7C7482;

  --paper:      #14121A;
  --paper-warm: #1C1922;
  --surface:    #1F1B26;
  --surface-2:  #262130;

  --hot:        #FF4D86;
  --hot-deep:   #FF7BA6;
  --hot-wash:   #38182A;

  --glass:      #56BDEE;
  --gold:       #F0BE33;
  --alert:      #FF6B6B;
  --go:         #3FBE8B;

  --stage-bg:   #0E0C12;

  --drop-1: 3px 3px 0 #000;
  --drop-2: 5px 5px 0 #000;
  --drop-3: 8px 8px 0 #000;
  --lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.35);
}

/* Respect du réglage système : personne ne devrait avoir mal au cœur
   en ouvrant un outil de travail. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}