/* ===================================================================== DocRag — unified design tokens (single source of truth for theming). One semantic token set, two values (dark default / light). Pages use the SEMANTIC tokens (--bg, --surface-1, --text, --border, --accent, --hover-*, --success…), never raw hex. Switch with . The legacy --med-* vars are remapped onto these tokens (below) so pages that still use them follow the theme automatically. ===================================================================== */ :root, [data-theme="dark"] { /* surfaces — depth 0 (page) → 3 (elevated) */ --bg: #14161a; --surface-1: #1a1d23; --surface-2: #22252b; --surface-3: #2b2f37; --border: #2a2d34; --border-strong: #3a3e47; /* text */ --text: #d7d7d7; --muted: #8a8f98; --faint: #6b7280; /* accent (gold) */ --accent: #d4a843; --accent-hover:#e8cc7a; --accent-soft: rgba(212,168,67,0.14); --on-accent: #14161a; /* interaction states — the fix for the hover→white bug */ --hover-bg: rgba(212,168,67,0.12); --hover-text: var(--accent); --active-bg: rgba(212,168,67,0.20); --focus-ring: rgba(212,168,67,0.45); /* semantic */ --success: #34c759; --success-soft: rgba(52,199,89,0.16); --warn: #e08a3c; --warn-soft: rgba(224,138,60,0.16); --danger: #e5484d; --danger-soft: rgba(229,72,77,0.16); --info: #6b93c4; --info-soft: rgba(107,147,196,0.16); /* elevation — NESSUNA: tutto sta su un unico livello (Cesare, 2026-07-31). I token restano per compatibilità, ma valgono `none`: la separazione fra superfici la fa il colore più scuro, mai un'ombra. */ --shadow-sm: none; --shadow: none; --shadow-lg: none; color-scheme: dark; } [data-theme="light"] { --bg: #f6f8fa; --surface-1: #ffffff; --surface-2: #eef1f5; --surface-3: #e4e9ef; --border: #dde3ea; --border-strong: #c6cfd8; --text: #1f2d3a; --muted: #55636f; --faint: #8a97a3; --accent: #b8922e; --accent-hover:#d4a843; --accent-soft: rgba(184,146,46,0.12); --on-accent: #ffffff; --hover-bg: rgba(184,146,46,0.10); --hover-text: var(--accent); --active-bg: rgba(184,146,46,0.18); --focus-ring: rgba(184,146,46,0.40); --success: #1a9e46; --success-soft: rgba(26,158,70,0.12); --warn: #b45309; --warn-soft: rgba(180,83,9,0.12); --danger: #c0362b; --danger-soft: rgba(192,54,43,0.12); --info: #2563eb; --info-soft: rgba(37,99,235,0.10); --shadow-sm: none; --shadow: none; --shadow-lg: none; color-scheme: light; } /* --- container / panel — UN SOLO look in tutta l'app --------------------- Regola (Cesare, 2026-07-31): i container stanno tutti allo STESSO livello (nessuna ombra, nessuno "sopra" l'altro), sono separati dal colore più scuro della pagina che si vede nel gap, e hanno gli angoli smussati. Un container = --panel-bg + --panel-radius, distanziato di --panel-gap su uno sfondo --bg. Contenuti annidati dentro un container usano --surface-2. Per cambiare l'aspetto di TUTTI i container: si edita QUI. --- */ :root { --panel-bg: var(--surface-1); --panel-radius: 12px; --panel-gap: 10px; } /* --- radius / typography scale (theme-agnostic) --- */ :root { --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 12px; --font-xs: 0.6875rem; --font-sm: 0.75rem; --font-base: 0.8125rem; --font-md: 0.875rem; --font-lg: 1rem; --font-xl: 1.125rem; --font-2xl: 1.375rem; } /* --- legacy --med-* remap → the old vars now follow the theme. The grey scale maps semantically (50 = lightest surface … 900 = strongest text) so existing `var(--med-gray-50)` backgrounds and `var(--med-gray-700)` text keep meaning in BOTH themes. --- */ :root { --med-primary: var(--accent); --med-primary-dark: var(--accent); --med-primary-light: var(--accent-hover); --med-accent: var(--accent); --med-accent-dark: var(--accent); --med-accent-light: var(--accent-hover); --med-gray-50: var(--bg); --med-gray-100: var(--surface-2); --med-gray-200: var(--border); --med-gray-300: var(--border-strong); --med-gray-400: var(--faint); --med-gray-500: var(--muted); --med-gray-600: var(--muted); --med-gray-700: var(--text); --med-gray-800: var(--text); --med-gray-900: var(--text); --med-radius-sm: var(--radius-sm); --med-radius: var(--radius); --med-radius-lg: var(--radius-lg); --med-radius-xl: var(--radius-xl); --med-shadow-sm: var(--shadow-sm); --med-shadow: var(--shadow); --med-shadow-lg: var(--shadow-lg); --med-font-xs: var(--font-xs); --med-font-sm: var(--font-sm); --med-font-base: var(--font-base); --med-font-md: var(--font-md); --med-font-lg: var(--font-lg); --med-font-xl: var(--font-xl); --med-font-2xl: var(--font-2xl); } /* --- page baseline --- */ html { background: var(--bg); } body { background: var(--bg); color: var(--text); } /* generic hover helper — pages can use .u-hover instead of hand-rolling #fff */ .u-hover:hover { background: var(--hover-bg); color: var(--hover-text); } /* --------------------------------------------------------------------------- GLOBAL PRIMITIVES — apply everywhere, no page changes needed. --------------------------------------------------------------------------- */ /* Scrollbars: themed on every page (only 2/34 styled them → white system bars in dark). Firefox uses scrollbar-color; WebKit uses the pseudo-elements. */ * { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* Keyboard focus, consistent everywhere (accessibility). Mouse clicks don't show it (:focus-visible only). */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Text selection */ ::selection { background: var(--accent-soft); }