/* ── TOKENS — valeurs brutes, source de vérité ────────────────
   Ce fichier ne contient QUE des primitives. Aucune logique de thème.
   Le thème light/dark est géré dans theme.css.
   ─────────────────────────────────────────────────────────── */

@layer base, layout, components, utilities;


@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-Italic.ttf") format("truetype");
}

:root {
  /* ── Aubergine / Violet (light) ── */
  --mj-aubergine:      #502258;
  --mj-aubergine-base: #502258; /* statique — ne change jamais */
  --mj-aubergine-92:   rgba(80, 34, 88, 0.92);
  --mj-aubergine-50:   rgba(80, 34, 88, 0.50);
  --mj-aubergine-25:   rgba(80, 34, 88, 0.25);
  --mj-aubergine-20:   rgba(80, 34, 88, 0.20);
  --mj-aubergine-18:   rgba(80, 34, 88, 0.18);
  --mj-aubergine-12:   rgba(80, 34, 88, 0.12);
  --mj-aubergine-10:   rgba(80, 34, 88, 0.10);
  --mj-aubergine-08:   rgba(80, 34, 88, 0.08);
  --mj-aubergine-06:   rgba(80, 34, 88, 0.06);
  --mj-aubergine-04:   rgba(80, 34, 88, 0.04);
  --mj-aubergine-03:   rgba(80, 34, 88, 0.03);

  /* ── Or / Gold (light) ── */
  --mj-gold:           #A26B25;
  --mj-gold-hover:     #8b5a1e;
  --mj-gold-tint:      rgba(162, 107, 37, 0.08);
  --mj-gold-42:        rgba(162, 107, 37, 0.42);
  --mj-gold-22:        rgba(162, 107, 37, 0.22);

  /* ── Surfaces (light) ── */
  --mj-cream:          #FCF2DE;
  --mj-lavender-tint:  #E7E7EF;
  --mj-paper:          #FFFFFF;
  --mj-paper-warm:     #F6F7F9;

  /* ── Texte & neutres (light) ── */
  --mj-ink:            #10162A;
  --mj-ink-55:         rgba(16, 22, 42, 0.55);
  --mj-ink-25:         rgba(16, 22, 42, 0.25);
  --mj-ink-18:         rgba(16, 22, 42, 0.18);
  --mj-ink-12:         rgba(16, 22, 42, 0.12);
  --mj-ink-10:         rgba(16, 22, 42, 0.10);
  --mj-ink-08:         rgba(16, 22, 42, 0.08);
  --mj-ink-06:         rgba(16, 22, 42, 0.06);
  --mj-ink-04:         rgba(16, 22, 42, 0.04);
  --mj-white-78:       rgba(255, 255, 255, 0.78);
  --mj-white-65:       rgba(255, 255, 255, 0.65);
  --mj-graphite:       #333333;
  --mj-mute:           #888888;
  --mj-divider:        #CCCCCC;

  /* ── Typographie ── */
  --font-sans:          "Outfit", "Inter", system-ui, -apple-system, sans-serif;
  --font-serif:         "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-display-serif: "Cormorant Garamond", "Instrument Serif", Georgia, serif;

  /* ── Easing ── */
  --easing:        cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Durées ── */
  --duration-short:  180ms;
  --duration-medium: 280ms;
  --duration-long:   380ms;

  /* ── Radii ── */
  --radius-pill: 999px;
  --radius-card: 24px;

  /* ── Ombres ── */
  --shadow-float:
    0 0px 4px var(--mj-ink-12),
    0 8px 28px var(--mj-aubergine-12);

  /* ════════════════════════════════════════════════════════════
     PALETTE DARK — primitives rôle-based (utilisées par theme.css)
     Inspiration : Tailwind CSS v4 / shadcn/ui
     Nommage par rôle & élévation, pas par couleur.
     ════════════════════════════════════════════════════════════ */

  /* ── Surfaces dark (du plus profond au plus élevé) ── */
  --mj-surface-bedrock: #100C08;  /* plancher absolu (footer) */
  --mj-surface-base:    #18120C;  /* fond de page */
  --mj-surface-sunken:  #1E1612;  /* enfoncé, sous default */
  --mj-surface-warm:    #1E1710;  /* variante chaude de default */
  --mj-surface-default: #241C14;  /* surface standard */
  --mj-surface-raised:  #342618;  /* élevé (cartes cliquables) */
  --mj-surface-raised-hover: #3C2E1C;
  --mj-surface-float:   #3A2C1E;  /* flottant (nav, flèches) */
  --mj-surface-float-hover:  #44341E;
  --mj-surface-line:    #3A2E20;  /* séparateur/divider */
  --mj-surface-overlay: #2A2018;  /* teinte superposée */

  /* ── Foreground dark (texte) ── */
  --mj-fg-primary:      #F2E8D8;  /* texte principal */
  --mj-fg-secondary:    #C4A878;  /* texte secondaire */
  --mj-fg-tertiary:     #9A8468;  /* texte discret */

  /* Opacités fg-primary */
  --mj-fg-55: rgba(242, 232, 216, 0.55);
  --mj-fg-25: rgba(242, 232, 216, 0.25);
  --mj-fg-18: rgba(242, 232, 216, 0.18);
  --mj-fg-12: rgba(242, 232, 216, 0.12);
  --mj-fg-10: rgba(242, 232, 216, 0.10);
  --mj-fg-08: rgba(242, 232, 216, 0.08);
  --mj-fg-06: rgba(242, 232, 216, 0.06);
  --mj-fg-04: rgba(242, 232, 216, 0.04);

  /* ── Brand dark (aubergine → lavande claire) ── */
  --mj-brand-default: #ffd6ff;
  --mj-brand-92:  rgba(255, 214, 255, 0.92);
  --mj-brand-50:  rgba(255, 214, 255, 0.50);
  --mj-brand-32:  rgba(255, 214, 255, 0.32);
  --mj-brand-26:  rgba(255, 214, 255, 0.26);
  --mj-brand-22:  rgba(255, 214, 255, 0.22);
  --mj-brand-16:  rgba(255, 214, 255, 0.16);
  --mj-brand-13:  rgba(255, 214, 255, 0.13);
  --mj-brand-10:  rgba(255, 214, 255, 0.10);
  --mj-brand-08:  rgba(255, 214, 255, 0.08);
  --mj-brand-05:  rgba(255, 214, 255, 0.05);
  --mj-brand-04:  rgba(255, 214, 255, 0.04);
  --mj-brand-emphasis: #DFC8F0;  /* titres, toggle fond */
  --mj-brand-subtle:   #ead8f8;  /* hover très doux */

  /* ── Action dark (gold) ── */
  --mj-action-default: #D4913A;
  --mj-action-hover:   #E8A245;
  --mj-action-tint:    rgba(212, 145, 58, 0.12);

  /* ── CTA dark (bouton primaire) ── */
  --mj-cta-default: #ffddba;
  --mj-cta-hover:   #f5d0a8;
  --mj-cta-subtle:  rgba(255, 221, 186, 0.15);
}