/* ========================================================================== Theme Contrast Overrides (Additive, Non-destructive) -------------------------------------------------------------------------- - Ensures sufficient text contrast on buttons across light/dark themes. - Uses data-theme attribute on . Defaults to 'dark' if not changed. - No changes to existing colors; we adjust text color and emphasis only. ========================================================================== */ /* base variables per theme */ :root, body[data-theme="dark"] { --btn-text: #f0f2f8; --btn-bg: rgba(184, 194, 214, 0.12); --btn-border: rgba(184, 194, 214, 0.25); --btn-text-muted: #d1d9eb; --btn-primary-text: #1a1d24; --btn-primary-bg: #6366f1; --btn-primary-border: rgba(99, 102, 241, 0.8); --btn-primary-text-light: #ffffff; } body[data-theme="light"] { --btn-text: #1f2937; --btn-bg: rgba(107, 114, 128, 0.12); --btn-border: rgba(107, 114, 128, 0.25); --btn-text-muted: #374151; --btn-primary-text: #ffffff; --btn-primary-bg: #4f46e5; --btn-primary-border: rgba(79, 70, 229, 0.8); --btn-primary-text-light: #ffffff; } /* generic buttons */ .btn { color: var(--btn-text) !important; border-color: var(--btn-border) !important; background-color: var(--btn-bg) !important; font-weight: 500; } .btn:hover { filter: brightness(1.08); border-color: var(--accent) !important; } /* primary emphasis */ .btn.primary { color: var(--btn-primary-text-light) !important; background-color: var(--btn-primary-bg) !important; border-color: var(--btn-primary-border) !important; font-weight: 600; } .btn.primary:hover { filter: brightness(1.15); box-shadow: 0 4px 12px color-mix(in srgb, var(--btn-primary-bg) 30%, transparent); } /* topbar buttons inherit too */ .topbar .btn { font-size: 13px; padding: 8px 12px; border-radius: 10px; font-weight: 500; } /* Ensure text visibility in cards and trays */ .card .btn, .debug-tray .btn { color: var(--btn-text) !important; } .card .btn.primary, .debug-tray .btn.primary { color: var(--btn-primary-text-light) !important; } /* Status-specific button variations */ .btn.status-ok { background-color: color-mix(in srgb, var(--status-ok) 15%, transparent) !important; border-color: color-mix(in srgb, var(--status-ok) 40%, transparent) !important; color: var(--status-ok) !important; } .btn.status-warning { background-color: color-mix(in srgb, var(--status-warning) 15%, transparent) !important; border-color: color-mix(in srgb, var(--status-warning) 40%, transparent) !important; color: var(--status-warning) !important; } .btn.status-error { background-color: color-mix(in srgb, var(--status-error) 15%, transparent) !important; border-color: color-mix(in srgb, var(--status-error) 40%, transparent) !important; color: var(--status-error) !important; }