/* SOL-357: Experimental "Gina" palette (opt-in via the sidebar toggle). Activated by data-palette="gina" on . Overrides design tokens only; remove the attribute to revert to the default theme. Colors-only (no type). */ :root[data-palette="gina"] { /* Primary — slate blue (#3F5F7A base, #35516A hover) */ --primary-50: #eef2f6; --primary-100: #d5e0ea; --primary-200: #b3c6d6; --primary-300: #8aa7be; --primary-400: #5f86a1; --primary-500: #3f5f7a; --primary-600: #3a586f; --primary-700: #35516a; --primary-800: #2c4357; --primary-900: #223544; /* Accent — supporting blue-green #8FAEB5 */ --accent-50: #eef4f5; --accent-100: #dbe9eb; --accent-200: #c4dadd; --accent-300: #abc7cb; --accent-400: #9dbabf; --accent-500: #8faeb5; --accent-600: #7a9da5; --accent-700: #688c94; --accent-800: #557680; --accent-900: #41606a; /* Warm neutrals (light end) to match the cream canvas */ --neutral-50: #f6f5f2; --neutral-100: #efeee9; --neutral-200: #e4e1db; --neutral-300: #d8d5cf; /* Semantic */ --success: #6f7a69; --success-light: #e6eae3; --warning: #c67a45; --warning-light: #f6e6da; --error: #b85c4a; --error-light: #f4e0db; --info: #8faeb5; --info-light: #e6eef0; /* Surfaces — cream canvas, near-white cards */ --bg-primary: #f2f1ee; --bg-secondary: #fafaf8; --bg-tertiary: #ecebe6; --surface-elevated: #fafaf8; /* Text */ --text-primary: #2b2b2b; --text-secondary: #5a5a5a; --text-muted: #8a857e; --text-inverse: #ffffff; /* Borders */ --border-light: #e4e1db; --border-default: #d8d5cf; --border-dark: #b9b4ab; /* Gradients (primary/accent ramps auto-follow; surface → cream) */ --gradient-surface: linear-gradient(180deg, #fafaf8 0%, #f2f1ee 100%); } /* --------------------------------------------------------------------------- SOL-357: extend the palette to the sidebar (left nav). The sidebar uses hardcoded colors, so we restyle it here when data-palette="gina" is active: a slate-blue nav (from the primary ramp) with light text, and the green active-state swapped for the palette accent. The :root[...] .sb-* specificity beats the base .sb-* rules and the [data-theme="dark"] .sidebar rule. --------------------------------------------------------------------------- */ :root[data-palette="gina"] .sidebar { background: #2c4357; border-right-color: rgba(255, 255, 255, 0.10); } :root[data-palette="gina"] .sb-logo-text { color: rgba(255, 255, 255, 0.92); } :root[data-palette="gina"] .sb-collapse-btn { color: rgba(255, 255, 255, 0.55); } :root[data-palette="gina"] .sb-collapse-btn:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); } :root[data-palette="gina"] .sb-link, :root[data-palette="gina"] .sb-group-btn { color: rgba(255, 255, 255, 0.78); } :root[data-palette="gina"] .sb-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); } /* Active state -> palette accent (was hardcoded green #4ade80) */ :root[data-palette="gina"] .sb-link.sb-active, :root[data-palette="gina"] .sb-group-btn.sb-active, :root[data-palette="gina"] .sb-group-btn.sb-active:hover { color: #c4dadd; } :root[data-palette="gina"] .sb-link.sb-active { background: rgba(143, 174, 181, 0.22); } :root[data-palette="gina"] .sb-link.sb-active:hover { background: rgba(143, 174, 181, 0.30); } :root[data-palette="gina"] body.sb-collapsed .sb-group-btn.sb-active { background: rgba(143, 174, 181, 0.22); }