/* ══════════════════════════════════════════════════════
   llms.click — Theme System
   Dark (default) + Light
   ══════════════════════════════════════════════════════ */

/* ── Font faces (serviti localmente) ── */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono/normal-300.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono/normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono/italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono/normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono/normal-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono/normal-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inter/normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter/normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter/normal-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inter/normal-700.woff2') format('woff2');
}

/* ── Dark theme (default) ── */
:root,
[data-theme="dark"] {
  --bg:     #04060a;
  --surf:   #07090e;
  --surf2:  #0c1018;
  --surf3:  #111820;
  --border: #131e2c;
  --border2:#1a2840;
  --text:   #d8e8f8;
  --muted:  #4a6880;
  --dim:    #1e3048;

  --accent: #00d4ff;
  --accent2:#0099cc;
  --green:  #2ecc71;
  --orange: #f0a500;
  --yellow: #f0a500;
  --red:    #e84040;
  --purple: #9060f0;

  --fm: 'IBM Plex Mono', monospace;
  --fs: 'Inter', sans-serif;
  --r:  6px;
  --r2: 10px;

  /* Layout */
  --sidebar: 220px;

  /* Overlay e shadow */
  --shadow: 0 8px 32px rgba(0,0,0,.5);
  --overlay-bg: rgba(0,0,0,.75);
  --nav-bg: rgba(4,6,10,.95);

  /* Toggle button */
  --theme-btn-bg:    rgba(255,255,255,.06);
  --theme-btn-hover: rgba(255,255,255,.1);
  --theme-btn-icon:  '☀';
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:     #f0f4f8;
  --surf:   #ffffff;
  --surf2:  #f5f8fb;
  --surf3:  #eaf0f6;
  --border: #dde5ee;
  --border2:#c8d5e3;
  --text:   #1a2a3a;
  --muted:  #6a8aaa;
  --dim:    #c8daea;

  --accent: #007acc;
  --accent2:#005fa0;
  --green:  #1a9e50;
  --orange: #c47800;
  --yellow: #c47800;
  --red:    #c0392b;
  --purple: #6040c0;

  --shadow: 0 4px 20px rgba(0,0,0,.1);
  --overlay-bg: rgba(0,0,0,.4);
  --nav-bg: rgba(255,255,255,.95);

  --theme-btn-bg:    rgba(0,0,0,.06);
  --theme-btn-hover: rgba(0,0,0,.1);
  --theme-btn-icon:  '🌙';
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r);
  background: var(--theme-btn-bg);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-family: var(--fm);
  font-size: 10px;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .04em;
  user-select: none;
}
.theme-toggle:hover {
  background: var(--theme-btn-hover);
  color: var(--text);
}
.theme-toggle .theme-icon { font-size: 13px; line-height: 1; }

/* ── Transizione fluida al cambio tema ── */
*, *::before, *::after {
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}
/* Escludi transizioni su elementi interattivi (evita lag) */
button, a, input, textarea, select {
  transition:
    background-color .15s,
    border-color .15s,
    color .15s,
    opacity .15s,
    box-shadow .15s;
}

/* ── Accent come RGB per rgba() ── */
:root,
[data-theme="dark"]  { --accent-rgb: 0,212,255; }
[data-theme="light"] { --accent-rgb: 0,122,204; }

/* ── Correzioni light specifiche ── */

/* body::before/after (noise + gradient su index/pricing) */
[data-theme="light"] body::before { opacity: .3; }
[data-theme="light"] body::after  { opacity: .4; }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surf2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border2); }

/* Selezione testo */
::selection { background: rgba(0,212,255,.25); color: var(--text); }
[data-theme="light"] ::selection { background: rgba(0,122,204,.2); }

/* Input placeholder */
[data-theme="light"] ::placeholder { color: var(--muted); opacity: .7; }

/* Feed icons admin */
[data-theme="light"] .feed-icon.blue   { background: rgba(0,122,204,.12); }
[data-theme="light"] .feed-icon.green  { background: rgba(26,158,80,.12); }
[data-theme="light"] .feed-icon.orange { background: rgba(196,120,0,.12); }

/* Score bar */
[data-theme="light"] .score-bar-fill  { box-shadow: none; }

/* Toggle slider */
[data-theme="light"] .toggle-input:checked + .toggle-slider { background: var(--accent); }