/* ===== Tokens de diseño compartidos (basados en el mockup de Claude Design) ===== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { --bg: #f7f8fa; --card: #fff; --card2: #fafbfc; --zebra: #edf0f3; --line: #e2e5ea; --hair: #f0f2f5; --ink: #16181d; --mut: #667085; --hov: #fafbfc; --today: #fffcf0; --side: #16181d; --side2: #21242b; --side3: #262a33; --sideink: #cfd4dc; --sidemut: #98a2b3; --acc: #C9A227; --accink: #1f1a05; --acclink: #8a6d12; --accdim: #ad8a1c; --gold: #fbf3d8; --goldink: #7a5e0a; --ok: #e7f4ee; --okink: #20614c; --wn: #fdf0d8; --wnink: #8a5a0a; --nt: #f0f2f5; --ntink: #667085; --off: #c8cdd6; --okdot: #2f7d5d; --wndot: #b5761a; --danger: #d64545; --danger-bg: #fbe9e9; --violet: #6d5bd0; --violet-bg: #ece9fb; --blue: #1d6fa5; --blue-bg: #e4f1fa; --radius: 10px; --radius-sm: 7px; } /* ===== Mode fosc: mateixos tokens, activat afegint data-theme="dark" a (vegeu el botó a nav.js). El sidebar ja era fosc de per si i es queda igual -- només canvien els tons de l'àrea de contingut i dels chips/badges. ===== */ :root[data-theme="dark"] { --bg: #14161a; --card: #1c1f26; --card2: #20232b; --zebra: #21242c; --line: #2c3038; --hair: #262a32; --ink: #e7e9ec; --mut: #98a2b3; --hov: #23262e; --today: #2a2712; --acc: #C9A227; --accink: #1f1a05; --acclink: #d9b64a; --accdim: #c9a227; --gold: #4a3c10; --goldink: #f0d78a; --ok: #163a2c; --okink: #7fe0bb; --wn: #4a350f; --wnink: #f0c17e; --nt: #2a2d34; --ntink: #b6bdc7; --off: #4a4f5a; --okdot: #4fae86; --wndot: #d99a4a; --danger: #e5484d; --danger-bg: #4a1e1e; --violet: #a696f0; --violet-bg: #2e2650; --blue: #6db8ea; --blue-bg: #17324a; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; } a { color: var(--acclink); text-decoration: none; } a:hover { color: var(--ink); } h1, h2, h3 { letter-spacing: -0.02em; margin: 0; } ::selection { background: var(--gold); }