/* ==========================================================================
   Charte « Écrin nocturne » — jetons
   --------------------------------------------------------------------------
   Raisonnement complet : docs/charte-graphique.md
   Résumé du parti pris :

   · Le fond est un quasi-noir à cast BLEU-VIOLET, pas un noir chaud. Les
     photos d'objets sont majoritairement chaudes (bois, laiton, cuir, papier) :
     un fond froid les fait rayonner par contraste complémentaire. Un fond
     chaud, lui, sépia tout — c'est ce qui rendait la version précédente
     vieillotte.
   · Un seul accent : l'or. Il porte « précieux » pour les trois cas d'usage
     (cadeau, transmission, pièce gardée) sans hurler comme un orange saturé,
     et sans jamais concurrencer la photo.
   · Chaque objet éclaire SA page avec les teintes extraites de sa propre
     photo (--object-glow / --object-ink), injectées à l'exécution.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Profondeurs ----------------------------------------------------- */
  /* Quatre plans seulement. Au-delà, une interface sombre devient illisible. */
  --c-void:     #050509;   /* le plus profond : derrière tout */
  --c-bg:       #0A0910;   /* la page */
  --c-surface:  #14131D;   /* cartes, panneaux */
  --c-raised:   #1D1B29;   /* survol, éléments actifs, champs */
  --c-veil:     rgba(4, 3, 8, 0.82);

  /* --- Encres ----------------------------------------------------------- */
  /* Ivoire légèrement chaud sur fond froid : c'est ce qui donne la sensation
     d'un texte « éclairé » plutôt que d'un texte gris sur noir. */
  --c-ink:      #F4F1EA;
  --c-ink-soft: #A8A2B6;
  --c-ink-faint:#6E6880;

  /* --- Accent : or ------------------------------------------------------ */
  --c-accent:      #E4B678;
  --c-accent-hi:   #F2CC96;   /* survol */
  --c-accent-deep: #C08B3F;   /* pression, bordures actives */
  --c-accent-soft: #2A2013;   /* fond de pastille */
  --c-accent-ink:  #14100A;   /* texte sur or */

  /* --- États ------------------------------------------------------------ */
  /* Jamais seules : toujours accompagnées d'une icône et d'un libellé. */
  --c-focus:        #7EC8E3;
  --c-success:      #7FCB9B;
  --c-success-soft: #12251B;
  --c-warning:      #F0B45C;
  --c-warning-soft: #2B2010;
  --c-danger:       #F2766B;
  --c-danger-soft:  #2C1513;
  --c-private:      #B7A5F0;   /* le violet reprend le cast du fond */
  --c-private-soft: #1C1830;

  /* --- Traits ------------------------------------------------------------ */
  /* Sur fond sombre, un filet doit être une lumière faible, pas un gris. */
  --c-line:        rgba(244, 241, 234, 0.10);
  --c-line-strong: rgba(244, 241, 234, 0.24);
  --c-line-accent: rgba(228, 182, 120, 0.38);

  /* --- Lumière de l'objet ------------------------------------------------ */
  /* Remplacées à l'exécution par la palette extraite de la photo. */
  --object-glow: #E4B678;
  --object-ink:  #C08B3F;

  /* --- Typographie -------------------------------------------------------- */
  /* Fraunces avec WONK = 0 : l'axe « wonk » produisait des formes anciennes,
     responsables du côté vieillot. À 0, avec opsz élevé, on obtient un serif
     à fort contraste, contemporain, proche d'un didone éditorial. */
  --f-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --f-read:    "Source Serif 4", Georgia, serif;
  --f-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --vf-display: "opsz" 144, "SOFT" 0, "WONK" 0;
  --vf-title:   "opsz" 72,  "SOFT" 0, "WONK" 0;
  --vf-label:   "opsz" 20,  "SOFT" 0, "WONK" 0;

  /* Échelle plus contrastée que la précédente : les titres doivent trancher,
     le corps doit rester confortable. */
  --t-mega:  clamp(3rem, 1.4rem + 6.8vw, 7.5rem);
  --t-hero:  clamp(2.4rem, 1.3rem + 4.6vw, 5rem);
  --t-h1:    clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h2:    clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem);
  --t-h3:    1.06rem;
  --t-body:  1rem;
  --t-read:  clamp(1.06rem, 1rem + 0.34vw, 1.24rem);
  --t-small: 0.875rem;
  --t-tiny:  0.78rem;

  --lh-tight: 1.02;
  --lh-title: 1.14;
  --lh-body:  1.55;
  --lh-read:  1.74;

  --ls-mega:  -0.035em;
  --ls-title: -0.02em;
  --ls-eyebrow: 0.16em;

  /* --- Rythme -------------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 9rem;

  --r-xs: 4px;  --r-sm: 8px;   --r-md: 12px;
  --r-lg: 18px; --r-xl: 26px;  --r-2xl: 34px;  --r-pill: 999px;

  --w-text:    min(100% - 2.5rem, 40rem);
  --w-content: min(100% - 2.5rem, 66rem);
  --w-wide:    min(100% - 2.5rem, 88rem);

  /* --- Ombres et lueurs ------------------------------------------------------ */
  /* Sur fond sombre, l'ombre ne sert presque à rien : c'est la LUEUR qui crée
     le relief. On garde des ombres pour les surfaces flottantes, et on ajoute
     des halos colorés pilotés par --object-glow. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --sh-2: 0 12px 32px rgba(0, 0, 0, 0.55);
  --sh-3: 0 24px 64px rgba(0, 0, 0, 0.62);
  --sh-4: 0 40px 110px rgba(0, 0, 0, 0.72);
  --sh-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --glow-soft: 0 0 60px -12px color-mix(in oklab, var(--object-glow) 40%, transparent);
  --glow-hard: 0 0 90px -10px color-mix(in oklab, var(--object-glow) 62%, transparent);

  /* --- Mouvement --------------------------------------------------------------- */
  --e-ui:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-scene: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:  140ms;
  --d-mid:   300ms;
  --d-slow:  620ms;
  --d-scene: 1100ms;

  --touch: 44px;
  /* Hauteur de la barre du haut. Toute autre barre collante s'y adosse :
     coller deux éléments à `top: 0` en cache un derrière l'autre. */
  --topbar-h: 68px;
}

/* ==========================================================================
   Thème clair « Lumière du jour »
   --------------------------------------------------------------------------
   Secondaire et assumé comme tel : il existe pour écrire longuement en plein
   jour, et pour prouver que le système tient sur deux fonds. L'or ne passant
   pas le contraste sur blanc, l'accent devient un bronze profond.
   ========================================================================== */

[data-theme="jour"] {
  color-scheme: light;

  --c-void:     #EDEBE6;
  --c-bg:       #FAF9F6;
  --c-surface:  #FFFFFF;
  --c-raised:   #F3F1EC;
  --c-veil:     rgba(16, 14, 20, 0.42);

  --c-ink:      #12111A;
  --c-ink-soft: #55525F;
  --c-ink-faint:#84808F;

  --c-accent:      #8A5A1E;
  --c-accent-hi:   #6F4715;
  --c-accent-deep: #5A390F;
  --c-accent-soft: #F5E9D6;
  --c-accent-ink:  #FFFFFF;

  --c-focus:        #1F6F8B;
  --c-success:      #2F6B4F;
  --c-success-soft: #E4F0E9;
  --c-warning:      #8A5A12;
  --c-warning-soft: #F8EDD8;
  --c-danger:       #A32A22;
  --c-danger-soft:  #F9E3E0;
  --c-private:      #5A47A0;
  --c-private-soft: #ECE7F8;

  --c-line:        rgba(18, 17, 26, 0.12);
  --c-line-strong: rgba(18, 17, 26, 0.28);
  --c-line-accent: rgba(138, 90, 30, 0.42);

  --sh-1: 0 1px 2px rgba(18, 17, 26, 0.06);
  --sh-2: 0 10px 28px rgba(18, 17, 26, 0.09);
  --sh-3: 0 22px 56px rgba(18, 17, 26, 0.13);
  --sh-4: 0 40px 100px rgba(18, 17, 26, 0.18);
  --sh-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --glow-soft: 0 18px 44px -20px color-mix(in oklab, var(--object-glow) 55%, transparent);
  --glow-hard: 0 26px 70px -22px color-mix(in oklab, var(--object-glow) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-mid: 1ms; --d-slow: 1ms; --d-scene: 1ms; }
}