/* =============================================================
   tokens.css — Design system "Éditorial Lune & Or"
   Variables CSS du handoff. Référence partout, ne pas dupliquer.
   ============================================================= */

:root {
  /* ----- Backgrounds ----- */
  --color-ink: #0e0a1f;
  --color-ink-deep: #070414;

  /* ----- Texte ----- */
  --color-paper: #fbf6e9;
  --color-mute: rgba(251, 246, 233, 0.55);

  /* ----- Accents ----- */
  --color-gold: #d9b471;
  --color-gold-soft: #c9a060;
  --color-violet: #5b3a8a;
  --color-violet-soft: #7d5cb0;

  /* ----- Accents bordeaux (réservés section Profil sexuel / Astro-sexe) ----- */
  --color-bordeaux: #7d2c3f;
  --color-bordeaux-soft: #a8485e;

  /* ----- Lignes ----- */
  --color-line: rgba(217, 180, 113, 0.25);

  /* ----- Surfaces translucides (en-tête collant) ----- */
  --header-bg: rgba(14, 10, 31, 0.92);

  /* ----- Familles typographiques ----- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----- Échelle typo responsive (clamp min adapté mobile, max raisonnable desktop) ----- */
  --fs-display-xxl: clamp(44px, 7vw, 112px);
  --fs-display-xl:  clamp(36px, 5vw, 80px);
  --fs-display-l:   clamp(28px, 3.5vw, 56px);
  --fs-display-m:   clamp(22px, 2.5vw, 40px);
  --fs-display-s:   clamp(18px, 1.8vw, 28px);
  --fs-body-l:      19px;
  --fs-body-m:      17px;
  --fs-body-s:      14px;
  --fs-mono:        11px;

  /* Line-heights & letter-spacing */
  --lh-display-tight: 0.88;
  --lh-display: 1.05;
  --lh-body: 1.7;
  --lh-body-tight: 1.5;
  --ls-display-tight: -0.025em;
  --ls-mono: 0.22em;

  /* ----- Espacements (échelle 8px) ----- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 120px;

  /* ----- Layout ----- */
  --container-wide: 1400px;
  --container: 1200px;
  --container-narrow: 800px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ----- Effets ----- */
  --duration-fast: 0.2s;
  --duration: 0.4s;
  --duration-slow: 0.9s;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* ----- Z-index échelle ----- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* =============================================================
   Thème clair « Lune et Or, version jour » (05/10/2026)
   Activé par <html data-theme="light"> : réglage du système du visiteur
   ou bouton soleil/lune de l'en-tête (choix mémorisé). Mêmes noms de
   variables : « ink » = fond, « paper » = texte, quel que soit le thème.
   ============================================================= */
:root[data-theme="light"] {
  --color-ink: #f8f3e7;          /* fond parchemin */
  --color-ink-deep: #efe7d4;     /* cartes, bandeaux */
  --color-paper: #1d1630;        /* texte encre violette */
  --color-mute: rgba(29, 22, 48, 0.64);
  --color-gold: #8c6418;         /* or foncé : contraste ≈ 4,9:1 sur le fond */
  --color-gold-soft: #7f5d1c;     /* utilisé en mono 11 px : il faut ≥ 4,5:1 (le #a2782a ne faisait que 3,6:1) */
  --color-violet: #5b3a8a;
  --color-violet-soft: #6d4ba0;
  --color-line: rgba(140, 100, 24, 0.28);
  --header-bg: rgba(248, 243, 231, 0.94);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }