/* static/css/theme-vars.css Soultrob theme variables (single source of truth) + small component helpers. - :root => Light theme (default) - :root[data-theme="dark"] => Dark overrides Keep this file loaded BEFORE the main site CSS if you plan to refactor site CSS to use vars. */ /* -------------------- Light theme tokens -------------------- */ :root { /* Core surfaces & page */ --bg: #f7f8fb; /* page background (light) */ --surface: #ffffff; /* cards, header, panels (light) */ --surface-hover: #f3f5f8; /* hover for surface in light */ --surface-strong: #f1f5f9; /* stronger contrast surface if needed */ --header-bg: var(--surface); --sidebar-bg: var(--surface); /* Text */ --text-primary: #0f1724; /* main body text (light) */ --text-secondary: #374151; /* slightly darker secondary */ --text-muted: #6b7280; /* Borders & shadows */ --border: rgba(15,23,36,0.06); --border-muted: rgba(15,23,36,0.04); --shadow: 0 1px 0 rgba(15,23,36,0.04); --overlay: rgba(0,0,0,0); /* Inputs / placeholder */ --input-bg: #ffffff; --placeholder: rgba(15,23,36,0.40); /* Accent / status (preserve values you provided) */ --accent-pink: #ff5ca1; --accent-purple: #6622cc; --accent-blue: #1593f7; --accent-red: #ff4d4f; --gradient-pink-purple: linear-gradient(145deg,#ff5ca1,#6622cc); --gradient-pastel: linear-gradient(135deg,#eef2ff,#fff0f6); /* UI constants */ --radius: 12px; --focus-ring: rgba(21,156,228,0.35); --transition-fast: 180ms ease; } /* -------------------- Dark overrides (applied when ) -------------------- */ :root[data-theme="dark"]{ /* page & surfaces */ --bg: #0f1115; /* page background (dark grey) */ --surface: #000000; /* pure black surfaces (cards, header, sidebar) */ --surface-hover: #0b0b0b; /* hover for surface in dark */ --surface-strong: #0a0a0a; --header-bg: var(--surface); --sidebar-bg: var(--surface); /* Text */ --text-primary: #e6eef6; /* soft off-white for readability (not pure #fff) */ --text-secondary: #9aa6b2; --text-muted: #9aa6b2; /* Borders & shadows */ --border: rgba(255,255,255,0.06); --border-muted: rgba(255,255,255,0.03); --shadow: 0 1px 0 rgba(255,255,255,0.02); --overlay: rgba(0,0,0,0.6); /* Inputs / placeholder */ --input-bg: #0a0a0a; --placeholder: rgba(255,255,255,0.40); } /* -------------------- Base layout helpers (safe, minimal) -------------------- */ * { box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: var(--text-primary); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition: background var(--transition-fast), color var(--transition-fast); } /* Container */ .container { max-width: 1100px; margin: 0 auto; padding: 1rem; } /* Cards / surfaces */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); transition: background var(--transition-fast), border var(--transition-fast); } /* Header */ .header { display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 12px 16px; background: var(--header-bg); border-bottom: 1px solid var(--border); } /* Typography & meta */ .small { font-size: 13px; color: var(--text-muted); } /* Buttons */ .btn { padding:8px 12px; border-radius: 8px; border:1px solid var(--border); background: var(--surface); color: var(--text-primary); cursor:pointer; transition: transform 120ms, box-shadow 120ms; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--gradient-pink-purple); color: #fff; border: none; } /* Inputs */ input, textarea, select { background: var(--input-bg); color: var(--text-primary); border:1px solid var(--border); padding:8px; border-radius:8px; } /* Focus */ :focus { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); border-color: var(--focus-ring); } /* Toggle UI (kept same visual behavior) */ .soul-toggle { position: relative; display: inline-flex; align-items:center; justify-content:center; width:56px; height:34px; padding:4px; border-radius:999px; background:var(--surface); border:1px solid var(--border); cursor:pointer; transition: background var(--transition-fast), border var(--transition-fast); } .soul-toggle:focus { box-shadow: 0 0 0 4px var(--focus-ring); } .soul-toggle .thumb { position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:999px; background: linear-gradient(145deg,#ffffff,#efefef); box-shadow: 0 4px 8px rgba(0,0,0,0.12); transition:left 220ms cubic-bezier(.2,.9,.22,1), background 220ms; } :root[data-theme="dark"] .soul-toggle .thumb { left:26px; background: linear-gradient(145deg,#252525,#0b0b0b); } .soul-toggle .icon { width:18px; height:18px; pointer-events:none; display:block; position:relative; z-index:6; transition:opacity 180ms, transform 180ms; fill:var(--text-primary); } .soul-toggle .icon-sun { opacity:1; transform:translateY(0) scale(1); } .soul-toggle .icon-moon{ opacity:0; transform:translateY(0) scale(0.9); } :root[data-theme="dark"] .soul-toggle .icon-sun { opacity:0; transform:translateY(0) scale(0.9); } :root[data-theme="dark"] .soul-toggle .icon-moon { opacity:1; transform:translateY(0) scale(1); } /* small responsive adjustments */ @media (max-width:640px){ .container{ padding: 12px; } .soul-toggle{ width:48px; height:30px; } .soul-toggle .thumb{ width:22px; height:22px; top:4px; } }