/* =========================================================
   LYS-MOI — TOKENS GLOBAUX
   ---------------------------------------------------------
   Base commune pour couleurs, espacements, rayons, ombres,
   thèmes et valeurs réutilisables.
   ========================================================= */

:root {
  /* =======================================================
     TYPOGRAPHIE
     ======================================================= */

  --font-main: Georgia, "Times New Roman", serif;

  /* =======================================================
     COULEURS — THÈME SOMBRE PAR DÉFAUT
     ======================================================= */

  --lm-bg: #08070a;
  --lm-bg-deep: #040408;

  --lm-surface: rgba(20, 20, 25, 0.68);
  --lm-surface-soft: rgba(255, 255, 255, 0.04);
  --lm-surface-medium: rgba(255, 255, 255, 0.06);
  --lm-surface-strong: rgba(18, 17, 23, 0.96);

  --lm-text: #f7efe3;
  --lm-text-main: #f5f1e8;
  --lm-text-title: #fff8ee;
  --lm-text-soft: #ddd3c4;
  --lm-text-muted: #c9b08a;
  --lm-text-faint: #a89782;

  --lm-gold: #f0c674;
  --lm-gold-soft: #f0c76b;
  --lm-gold-deep: #b7833f;

  --lm-accent: var(--lm-gold);
  --lm-accent-dark: #1a1620;
  --lm-accent-soft: rgba(240, 198, 116, 0.12);
  --lm-accent-medium: rgba(240, 198, 116, 0.22);
  --lm-accent-strong: rgba(240, 198, 116, 0.42);

  --lm-success: #bfe6c9;
  --lm-success-soft: rgba(159, 211, 167, 0.09);
  --lm-success-border: rgba(159, 211, 167, 0.42);

  --lm-danger: #ffd0d0;
  --lm-danger-text: #ffb8b8;
  --lm-danger-soft: rgba(120, 20, 20, 0.16);
  --lm-danger-border: rgba(255, 120, 120, 0.28);

  --lm-warning: #ffd4a8;
  --lm-warning-soft: rgba(240, 198, 116, 0.10);
  --lm-warning-border: rgba(240, 198, 116, 0.22);

  /* =======================================================
     BORDURES
     ======================================================= */

  --lm-border: rgba(255, 255, 255, 0.10);
  --lm-border-soft: rgba(255, 255, 255, 0.08);
  --lm-border-medium: rgba(255, 255, 255, 0.16);
  --lm-border-strong: rgba(255, 255, 255, 0.24);

  --lm-border-gold: rgba(240, 198, 116, 0.24);
  --lm-border-gold-strong: rgba(240, 198, 116, 0.44);

  /* =======================================================
     RAYONS
     ======================================================= */

  --lm-radius-xs: 8px;
  --lm-radius-sm: 12px;
  --lm-radius-md: 16px;
  --lm-radius-lg: 22px;
  --lm-radius-xl: 28px;
  --lm-radius-2xl: 34px;
  --lm-radius-pill: 999px;

  /* =======================================================
     OMBRES
     ======================================================= */

  --lm-shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.22);
  --lm-shadow-main: 0 20px 50px rgba(0, 0, 0, 0.35);
  --lm-shadow-strong: 0 28px 70px rgba(0, 0, 0, 0.55);
  --lm-shadow-accent: 0 10px 25px rgba(240, 198, 116, 0.25);

  /* =======================================================
     BLUR / TRANSITIONS
     ======================================================= */

  --lm-blur: blur(10px);
  --lm-blur-strong: blur(14px);

  --lm-transition-fast: 0.18s ease;
  --lm-transition: 0.22s ease;
  --lm-transition-slow: 0.32s ease;

  /* =======================================================
     LAYOUT
     ======================================================= */

  --lm-header-height: 70px;

  --lm-page-max: 1240px;
  --lm-page-wide: 1480px;

  --lm-space-1: 4px;
  --lm-space-2: 8px;
  --lm-space-3: 12px;
  --lm-space-4: 16px;
  --lm-space-5: 20px;
  --lm-space-6: 24px;
  --lm-space-7: 30px;
  --lm-space-8: 36px;
  --lm-space-9: 42px;
  --lm-space-10: 52px;

  /* =======================================================
     COMPATIBILITÉ AVEC VARIABLES EXISTANTES
     -------------------------------------------------------
     Ça permet de brancher progressivement les anciens CSS.
     À supprimer quand tous les CSS auront migré vers --lm-*.
     ======================================================= */

  --accent: var(--lm-accent);
  --accent-dark: var(--lm-accent-dark);

  --gold: var(--lm-gold-soft);
  --text: var(--lm-text);
  --text-main: var(--lm-text-main);
  --text-title: var(--lm-text-title);
  --text-soft: var(--lm-text-soft);
  --text-muted: var(--lm-text-muted);
  --muted: var(--lm-text-muted);

  --bg-dark: var(--lm-bg);
  --bg-dark-soft: var(--lm-surface);
  --bg-dark-strong: var(--lm-surface-strong);

  --border-soft: var(--lm-border-soft);
  --border-soft-2: var(--lm-border-medium);
  --border-soft-3: var(--lm-border-strong);

  --line: var(--lm-border);
  --line-soft: var(--lm-border-soft);

  --radius-sm: var(--lm-radius-sm);
  --radius-md: var(--lm-radius-md);
  --radius-lg: var(--lm-radius-lg);
  --radius-xl: var(--lm-radius-xl);

  --shadow: var(--lm-shadow-strong);
  --shadow-soft: var(--lm-shadow-soft);
  --shadow-main: var(--lm-shadow-main);
  --shadow-accent: var(--lm-shadow-accent);

  --header-height: var(--lm-header-height);
}

/* =========================================================
   THÈME CLAIR — PRÉPARÉ POUR PLUS TARD
   ---------------------------------------------------------
   Il ne sera activé que quand on posera le toggle.
   ========================================================= */

[data-theme="light"] {
  --lm-bg: #f8efe3;
  --lm-bg-deep: #f0e1cf;

  --lm-surface: rgba(255, 252, 245, 0.82);
  --lm-surface-soft: rgba(80, 48, 22, 0.045);
  --lm-surface-medium: rgba(80, 48, 22, 0.075);
  --lm-surface-strong: rgba(255, 250, 238, 0.96);

  --lm-text: #2b2118;
  --lm-text-main: #2f251c;
  --lm-text-title: #21170f;
  --lm-text-soft: #5d4b3a;
  --lm-text-muted: #8a7158;
  --lm-text-faint: #9a856e;

  --lm-gold: #9c6a2f;
  --lm-gold-soft: #a87535;
  --lm-gold-deep: #6d431c;

  --lm-accent: var(--lm-gold);
  --lm-accent-dark: #fff8ed;
  --lm-accent-soft: rgba(156, 106, 47, 0.13);
  --lm-accent-medium: rgba(156, 106, 47, 0.24);
  --lm-accent-strong: rgba(156, 106, 47, 0.42);

  --lm-success: #27643a;
  --lm-success-soft: rgba(39, 100, 58, 0.10);
  --lm-success-border: rgba(39, 100, 58, 0.28);

  --lm-danger: #8d2d2d;
  --lm-danger-text: #8d2d2d;
  --lm-danger-soft: rgba(141, 45, 45, 0.10);
  --lm-danger-border: rgba(141, 45, 45, 0.28);

  --lm-warning: #7a4c13;
  --lm-warning-soft: rgba(156, 106, 47, 0.12);
  --lm-warning-border: rgba(156, 106, 47, 0.28);

  --lm-border: rgba(80, 48, 22, 0.14);
  --lm-border-soft: rgba(80, 48, 22, 0.10);
  --lm-border-medium: rgba(80, 48, 22, 0.18);
  --lm-border-strong: rgba(80, 48, 22, 0.26);

  --lm-border-gold: rgba(156, 106, 47, 0.26);
  --lm-border-gold-strong: rgba(156, 106, 47, 0.44);

  --lm-shadow-soft: 0 12px 28px rgba(70, 45, 20, 0.10);
  --lm-shadow-main: 0 18px 44px rgba(70, 45, 20, 0.16);
  --lm-shadow-strong: 0 24px 70px rgba(70, 45, 20, 0.22);
  --lm-shadow-accent: 0 10px 25px rgba(156, 106, 47, 0.20);
}