/* ==========================================================================
   FRANCIS FILM — variables.css
   Jetons de design. Aucune règle de mise en page ici : uniquement des valeurs.
   Référence : francis-film-identite.pdf
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     1. PALETTE DE MARQUE — les quatre couleurs officielles
     --------------------------------------------------------------- */
  --ff-ink: #14110f; /* Ink   */
  --ff-paper: #f7f4ef; /* Paper  */
  --ff-amber: #c8783c; /* Ambre — accent, un seul élément à la fois */
  --ff-background: #edeae4; /* Background */

  /* Dérivés transparents (jamais de nouvelle teinte, seulement de l'opacité) */
  --ff-ink-72: rgba(20, 17, 15, 0.72);
  --ff-ink-62: rgba(20, 17, 15, 0.62);
  --ff-ink-38: rgba(20, 17, 15, 0.38);
  --ff-ink-14: rgba(20, 17, 15, 0.14);
  --ff-ink-08: rgba(20, 17, 15, 0.08);

  --ff-paper-72: rgba(247, 244, 239, 0.72);
  --ff-paper-45: rgba(247, 244, 239, 0.45);
  --ff-paper-24: rgba(247, 244, 239, 0.24);
  --ff-paper-12: rgba(247, 244, 239, 0.12);

  /* ---------------------------------------------------------------
     2. RÔLES — ce que le CSS utilise réellement.
        Bascule automatiquement sur les sections [data-theme="dark"].
     --------------------------------------------------------------- */
  --background: var(--ff-paper);
  --text: var(--ff-ink);
  --text-soft: var(--ff-ink-62);
  --text-muted: var(--ff-ink-38);
  --border: var(--ff-ink-14);
  --surface: var(--ff-paper);
  --accent: var(--ff-amber);
  --contrast: var(--ff-ink); /* fond des boutons pleins */
  --contrast-text: var(--ff-paper); /* texte sur ces boutons   */

  /* ---------------------------------------------------------------
     3. TYPOGRAPHIE — Poppins uniquement (règle d'identité)
        Bold pour le nom, Light pour la signature.
     --------------------------------------------------------------- */
  --police:
    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gr-300: 300;
  --gr-400: 400;
  --gr-500: 500;
  --gr-700: 700;

  /* Échelle fluide : le site respire entre 360 px et 1440 px */
  --fs-micro: 11px;
  --fs-small: clamp(13px, 0.35vw + 12px, 14.5px);
  --fs-body: clamp(15px, 0.35vw + 14px, 16.5px);
  --fs-lead: clamp(17px, 0.55vw + 15px, 20px);
  --fs-title: clamp(25px, 2.1vw + 18px, 40px);
  --fs-title-l: clamp(28px, 2.7vw + 19px, 48px);
  --fs-price: clamp(30px, 1.1vw + 26px, 38px);

  --ls-large: 0.3em; /* surtitres, étiquettes */
  --ls-medium: 0.2em;
  --ls-small: 0.09em;
  --ls-tight: -0.015em; /* gros titres */

  --lh-tight: 1.22;
  --lh-title: 1.28;
  --lh-body: 1.65;

  /* ---------------------------------------------------------------
     4. MISE EN PAGE
     --------------------------------------------------------------- */
  --shell: 1060px;
  --gap: clamp(20px, 4vw, 32px);
  --section: clamp(72px, 8vw, 128px);
  --section-l: clamp(96px, 11vw, 168px);
  --stack: clamp(26px, 3vw, 44px);
  --mesure: 62ch; /* longueur de ligne confortable */

  /* ---------------------------------------------------------------
     5. FORMES
     --------------------------------------------------------------- */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 100px;
  --stroke: 1.5px; /* épaisseur des repères de visée à l'écran */

  /* ---------------------------------------------------------------
     6. MOUVEMENT
     --------------------------------------------------------------- */
  --duration-short: 0.18s;
  --duration-medium: 0.34s;
  --duration-long: 0.7s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------------------------------------------------------
     7. Z-Index Layers
     --------------------------------------------------------------- */
  --z-content: 1;
  --z-viewfinder: 40;
  --z-header: 60;
  --z-menu: 55; /* sous l'en-tête : le bouton de fermeture reste atteignable */
}

/* =================================================================
   THÈME SOMBRE DE SECTION
   Posé avec data-theme="dark" sur une <section>.
   Tout ce qui est à l'intérieur bascule sans une seule règle en plus.
   ================================================================= */
[data-theme="dark"] {
  --background: var(--ff-ink);
  --text: var(--ff-paper);
  --text-soft: var(--ff-paper-72);
  --text-muted: var(--ff-paper-45);
  --border: var(--ff-paper-24);
  --surface: var(--ff-ink);
  --contrast: var(--ff-paper);
  --contrast-text: var(--ff-ink);
}

/* Section en teinte « Background » — le gris chaud de la palette */
[data-theme="background"] {
  --background: var(--ff-background);
  --surface: var(--ff-paper);
}