/* ================================================================
   REVISION LOADER — theme.css
   Design tokens, couleurs, typographie, mode jour/nuit
   ================================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Dark theme ── */
:root {
  /* Couleurs primaires */
  --accent:     #6366f1;
  --accent-dim: #4f46e5;
  --accent-glow: rgba(99,102,241,.22);
  --accent-subtle: rgba(99,102,241,.08);

  /* Backgrounds */
  --bg:      #0b0c10;
  --bg-1:    #10111a;
  --bg-2:    #181924;
  --bg-3:    #1f202e;
  --bg-4:    #272838;
  --bg-5:    #2e2f45;

  /* Texte */
  --text:    #e4e5f0;
  --text-2:  #a8aac0;
  --text-3:  #6b6e85;

  /* Bordures */
  --border:   rgba(99,102,241,.14);
  --border-2: rgba(255,255,255,.06);
  --border-3: rgba(255,255,255,.10);

  /* Status */
  --green:  #22c55e;
  --yellow: #eab308;
  --red:    #ef4444;
  --blue:   #3b82f6;

  /* Dimensions */
  --sidebar-w: 264px;
  --topbar-h:  52px;

  /* Radius */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* Transitions */
  --t: .18s ease;
  --t-slow: .3s ease;
}

/* ── Minuit theme — ultra sombre, violet profond ── */
[data-theme="midnight"] {
  --accent:     #a78bfa;
  --accent-dim: #7c3aed;
  --accent-glow: rgba(167,139,250,.3);
  --accent-subtle: rgba(167,139,250,.1);

  --bg:      #060608;
  --bg-1:    #0a0a0f;
  --bg-2:    #0f0f18;
  --bg-3:    #141420;
  --bg-4:    #1a1a2e;
  --bg-5:    #1f1f38;

  --text:    #f0eeff;
  --text-2:  #b8b0d8;
  --text-3:  #6e68a0;

  --border:   rgba(167,139,250,.18);
  --border-2: rgba(255,255,255,.05);
  --border-3: rgba(255,255,255,.09);

  --green:  #34d399;
  --yellow: #fcd34d;
  --red:    #f87171;
  --blue:   #60a5fa;
}

/* ── Light theme (défaut) — doux sur les yeux, papier ivoire ── */
[data-theme="light"] {
  --accent:        #4f46e5;
  --accent-dim:    #3730a3;
  --accent-glow:   rgba(79,70,229,.14);
  --accent-subtle: rgba(79,70,229,.06);

  /* Fond ivoire chaud — moins agressif que le blanc pur */
  --bg:    #f0ede8;
  --bg-1:  #faf8f5;
  --bg-2:  #f5f2ed;
  --bg-3:  #ede9e2;
  --bg-4:  #e3ddd4;
  --bg-5:  #d6cfc4;

  /* Texte ardoise — plus doux que le noir pur */
  --text:   #2c2a35;
  --text-2: #5a5570;
  --text-3: #958fa8;

  /* Bordures subtiles */
  --border:   rgba(79,70,229,.12);
  --border-2: rgba(60,50,80,.09);
  --border-3: rgba(60,50,80,.16);

  /* Status : légèrement plus sombres en light */
  --green:  #16a34a;
  --yellow: #ca8a04;
  --red:    #dc2626;
  --blue:   #2563eb;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background var(--t-slow), color var(--t-slow);
  -webkit-font-smoothing: antialiased;
}

/* Subtle grain overlay (dark only) */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999; opacity: 0;
}
:root body::after { opacity: .35; }
[data-theme="midnight"] body::after { opacity: .55; }
[data-theme="light"] body::after { opacity: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 99px; }

/* Utility */
.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }

/* ── Transitions de thème ── */
*, *::before, *::after {
  transition: background-color var(--t-slow), border-color var(--t-slow), color var(--t-slow);
}
/* Exclure les transitions sur les animations pour éviter les conflits */
.confetti-particle, .badge-new, .trending-label-dot, #custom-cursor * {
  transition: none !important;
}
.lb-content-zone::before, .lb-content-zone::after {
  transition: none !important;
  background-color: transparent !important;
}

/* ── Sélection texte colorée ── */
::selection {
  background: var(--accent-glow);
  color: var(--text);
}

/* ── Focus rings ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Scrollbar theming ── */
[data-theme="midnight"] ::-webkit-scrollbar-thumb { background: var(--bg-4); }

/* ── DM Mono pour les éléments code/mono ── */
.mono, kbd, code, .tsp-live-time, .lb-counter, .ldp-v.mono {
  font-family: 'DM Mono', monospace;
  letter-spacing: -.3px;
}


/* ── Rose Gold theme — chaleureux, romantique, premium ── */
[data-theme="rosegold"] {
  --accent:        #e879a0;
  --accent-dim:    #be185d;
  --accent-glow:   rgba(232,121,160,.22);
  --accent-subtle: rgba(232,121,160,.08);

  --bg:      #0f0a0d;
  --bg-1:    #180d12;
  --bg-2:    #201219;
  --bg-3:    #2a1821;
  --bg-4:    #361e2b;
  --bg-5:    #432535;

  --text:    #fde8ef;
  --text-2:  #d4a0b5;
  --text-3:  #8a5870;

  --border:   rgba(232,121,160,.18);
  --border-2: rgba(255,200,220,.07);
  --border-3: rgba(255,200,220,.13);

  --green:  #34d399;
  --yellow: #fbbf24;
  --red:    #f87171;
  --blue:   #60a5fa;
}

/* ── Forest theme — naturel, profond, apaisant ── */
[data-theme="forest"] {
  --accent:        #4ade80;
  --accent-dim:    #16a34a;
  --accent-glow:   rgba(74,222,128,.2);
  --accent-subtle: rgba(74,222,128,.07);

  --bg:      #080d09;
  --bg-1:    #0d1510;
  --bg-2:    #111d16;
  --bg-3:    #16261c;
  --bg-4:    #1c3023;
  --bg-5:    #233c2b;

  --text:    #e8f5ec;
  --text-2:  #9dc8aa;
  --text-3:  #5a8c6b;

  --border:   rgba(74,222,128,.16);
  --border-2: rgba(160,255,180,.06);
  --border-3: rgba(160,255,180,.11);

  --green:  #4ade80;
  --yellow: #fde047;
  --red:    #f87171;
  --blue:   #60a5fa;
}

/* ── Ember theme — orange brûlé, ardent, créatif ── */
[data-theme="ember"] {
  --accent:        #f97316;
  --accent-dim:    #c2410c;
  --accent-glow:   rgba(249,115,22,.22);
  --accent-subtle: rgba(249,115,22,.08);

  --bg:      #0c0805;
  --bg-1:    #140e08;
  --bg-2:    #1c130c;
  --bg-3:    #251a12;
  --bg-4:    #2e2118;
  --bg-5:    #39291f;

  --text:    #fef3e8;
  --text-2:  #d4a57a;
  --text-3:  #8a6040;

  --border:   rgba(249,115,22,.18);
  --border-2: rgba(255,200,140,.07);
  --border-3: rgba(255,200,140,.13);

  --green:  #34d399;
  --yellow: #fbbf24;
  --red:    #ef4444;
  --blue:   #60a5fa;
}

/* ── Thèmes : grain overlay adapté ── */
[data-theme="rosegold"] body::after { opacity: .4; }
[data-theme="forest"]   body::after { opacity: .3; }
[data-theme="ember"]    body::after { opacity: .4; }

/* ── Céladon — light vert sauge apaisant ── */
[data-theme="celadon"] {
  --accent:        #0d9488;
  --accent-dim:    #0f766e;
  --accent-glow:   rgba(13,148,136,.14);
  --accent-subtle: rgba(13,148,136,.06);
  --bg:    #f0f4f2;
  --bg-1:  #f7faf8;
  --bg-2:  #eef3f0;
  --bg-3:  #e2ebe6;
  --bg-4:  #d3e0d8;
  --bg-5:  #c0d0c8;
  --text:   #1a2e28;
  --text-2: #3d5a52;
  --text-3: #7a9e94;
  --border:   rgba(13,148,136,.12);
  --border-2: rgba(20,60,50,.09);
  --border-3: rgba(20,60,50,.16);
  --green:  #059669;
  --yellow: #b45309;
  --red:    #dc2626;
  --blue:   #0369a1;
}
[data-theme="celadon"] body::after { opacity: 0; }

/* ── Sable — light beige doré solaire ── */
[data-theme="sand"] {
  --accent:        #b45309;
  --accent-dim:    #92400e;
  --accent-glow:   rgba(180,83,9,.14);
  --accent-subtle: rgba(180,83,9,.06);
  --bg:    #faf6ee;
  --bg-1:  #fffcf5;
  --bg-2:  #f5f0e4;
  --bg-3:  #ece4d0;
  --bg-4:  #dfd5bc;
  --bg-5:  #cec3a6;
  --text:   #2c2008;
  --text-2: #5c4a22;
  --text-3: #9c8660;
  --border:   rgba(180,83,9,.12);
  --border-2: rgba(80,55,10,.09);
  --border-3: rgba(80,55,10,.16);
  --green:  #15803d;
  --yellow: #a16207;
  --red:    #dc2626;
  --blue:   #1d4ed8;
}
[data-theme="sand"] body::after { opacity: 0; }

/* ── Givre — light bleu arctique glacé ── */
[data-theme="frost"] {
  --accent:        #2563eb;
  --accent-dim:    #1d4ed8;
  --accent-glow:   rgba(37,99,235,.14);
  --accent-subtle: rgba(37,99,235,.06);
  --bg:    #f0f4fb;
  --bg-1:  #f7f9fd;
  --bg-2:  #eaeff8;
  --bg-3:  #dde5f4;
  --bg-4:  #cdd8ee;
  --bg-5:  #b8c7e4;
  --text:   #0f1f3d;
  --text-2: #2e4a7a;
  --text-3: #6b8ab8;
  --border:   rgba(37,99,235,.12);
  --border-2: rgba(15,30,70,.09);
  --border-3: rgba(15,30,70,.16);
  --green:  #15803d;
  --yellow: #a16207;
  --red:    #dc2626;
  --blue:   #2563eb;
}
[data-theme="frost"] body::after { opacity: 0; }