/* ============================================================= ORTHAVAX — Global Theme site.css or _Layout should load this before any other stylesheet. Theme is applied via [data-theme] on : data-theme="light" — forced light data-theme="dark" — forced dark (no attribute) — follows OS prefers-color-scheme Consumers reference --ov-* variables. The --color_N aliases keep compatibility with any existing site.css rules. ============================================================= */ /* ── Brand Palette (static — same in both modes) ────────────── */ :root { --ov-brand-500: rgba(23, 122, 126, 1); /* primary teal */ --ov-brand-600: rgba(18, 100, 103, 1); /* hover / pressed */ --ov-brand-400: rgba(42, 161, 166, 1); /* lighter teal (dark-mode primary) */ --ov-brand-300: rgba(80, 190, 195, 1); /* accent highlight */ --ov-danger-500: rgba(200, 50, 50, 1); --ov-danger-600: rgba(163, 40, 40, 1); --ov-warn-500: rgba(186, 117, 23, 1); --ov-success-500: rgba( 59, 109, 17, 1); --ov-info-500: rgba( 24, 95, 165, 1); } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE (default) ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="light"], [data-bs-theme="light"] { /* ── Brand ─────────────────────────────────────────────── */ --ov-brand: var(--ov-brand-500); --ov-brand-hover: var(--ov-brand-600); --ov-brand-text: #ffffff; --ov-brand-subtle: rgba(23, 122, 126, 0.08); --ov-brand-muted: rgba(23, 122, 126, 0.15); --ov-brand-border: rgba(23, 122, 126, 0.28); /* ── Surfaces ──────────────────────────────────────────── */ --ov-surface-page: #f3f4f4; /* overall page background */ --ov-surface-base: #ffffff; /* cards, panels, tables */ --ov-surface-raised: #ffffff; /* modals, dropdowns */ --ov-surface-subtle: #f7f8f8; /* alternate rows, section headers */ --ov-surface-muted: #eef0f0; /* disabled states, empty areas */ /* ── Text ──────────────────────────────────────────────── */ --ov-text-primary: #1a1a1a; --ov-text-secondary: #4b5563; --ov-text-muted: #6b7280; --ov-text-hint: #9ca3af; --ov-text-on-brand: #ffffff; --ov-text-link: var(--ov-brand-500); --ov-text-link-hover: var(--ov-brand-600); /* ── Borders ───────────────────────────────────────────── */ --ov-border-subtle: rgba(0, 0, 0, 0.07); --ov-border: rgba(0, 0, 0, 0.11); --ov-border-strong: rgba(0, 0, 0, 0.18); --ov-border-brand: var(--ov-brand-border); /* ── Semantic Surfaces ─────────────────────────────────── */ --ov-surface-danger: rgba(252, 235, 235, 0.80); --ov-surface-warn: rgba(250, 238, 218, 0.80); --ov-surface-success: rgba(234, 243, 222, 0.80); --ov-surface-info: rgba(230, 241, 251, 0.80); --ov-border-danger: rgba(200, 50, 50, 0.22); --ov-border-warn: rgba(186, 117, 23, 0.22); --ov-border-success: rgba( 59, 109, 17, 0.22); --ov-border-info: rgba( 24, 95, 165, 0.22); --ov-text-danger: rgba(160, 35, 35, 1); --ov-text-warn: rgba(133, 79, 11, 1); --ov-text-success: rgba( 45, 85, 12, 1); --ov-text-info: rgba( 18, 72, 130, 1); /* ── Interactive ───────────────────────────────────────── */ --ov-focus-ring: rgba(23, 122, 126, 0.30); --ov-overlay: rgba(0, 0, 0, 0.40); /* ── Shadows ───────────────────────────────────────────── */ --ov-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --ov-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ov-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10); /* ── Nav / Sidebar ─────────────────────────────────────── */ --ov-nav-bg: #ffffff; --ov-nav-border: rgba(0, 0, 0, 0.09); --ov-nav-text: #374151; --ov-nav-text-active: var(--ov-brand-500); --ov-nav-item-hover: rgba(23, 122, 126, 0.07); --ov-nav-item-active: rgba(23, 122, 126, 0.12); /* ── Form Controls ─────────────────────────────────────── */ --ov-input-bg: #ffffff; --ov-input-border: rgba(0, 0, 0, 0.18); --ov-input-border-focus: var(--ov-brand-500); --ov-input-text: #1a1a1a; --ov-input-placeholder: #9ca3af; /* ── Backwards-compat aliases (existing site.css vars) ─── */ --color_1: #ffffff; --color_2: rgba(23, 122, 126, 1); --color_3: rgba(0, 0, 0, 0.5); --color_5: #000000; } /* ═══════════════════════════════════════════════════════════════ DARK MODE ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"], [data-bs-theme="dark"] { --ov-brand: var(--ov-brand-400); --ov-brand-hover: var(--ov-brand-300); --ov-brand-text: #ffffff; --ov-brand-subtle: rgba(42, 161, 166, 0.12); --ov-brand-muted: rgba(42, 161, 166, 0.20); --ov-brand-border: rgba(42, 161, 166, 0.32); --ov-surface-page: #161b1c; --ov-surface-base: #1e2526; --ov-surface-raised: #252d2e; --ov-surface-subtle: #222a2b; --ov-surface-muted: #1a2021; --ov-text-primary: #e2e8e8; --ov-text-secondary: #9aafb0; --ov-text-muted: #6e8a8b; --ov-text-hint: #4a6162; --ov-text-on-brand: #ffffff; --ov-text-link: var(--ov-brand-400); --ov-text-link-hover: var(--ov-brand-300); --ov-border-subtle: rgba(255, 255, 255, 0.05); --ov-border: rgba(255, 255, 255, 0.09); --ov-border-strong: rgba(255, 255, 255, 0.14); --ov-border-brand: var(--ov-brand-border); --ov-surface-danger: rgba(163, 45, 45, 0.22); --ov-surface-warn: rgba(133, 79, 11, 0.22); --ov-surface-success: rgba( 59, 109, 17, 0.22); --ov-surface-info: rgba( 24, 95, 165, 0.22); --ov-border-danger: rgba(240, 90, 90, 0.20); --ov-border-warn: rgba(239, 159, 39, 0.20); --ov-border-success: rgba( 99, 153, 34, 0.20); --ov-border-info: rgba( 55, 138, 221, 0.20); --ov-text-danger: rgba(240, 90, 90, 1); --ov-text-warn: rgba(239, 159, 39, 1); --ov-text-success: rgba( 99, 153, 34, 1); --ov-text-info: rgba( 55, 138, 221, 1); --ov-focus-ring: rgba(42, 161, 166, 0.35); --ov-overlay: rgba(0, 0, 0, 0.65); --ov-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --ov-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35); --ov-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45); --ov-nav-bg: #1e2526; --ov-nav-border: rgba(255, 255, 255, 0.07); --ov-nav-text: #9aafb0; --ov-nav-text-active: var(--ov-brand-400); --ov-nav-item-hover: rgba(42, 161, 166, 0.09); --ov-nav-item-active: rgba(42, 161, 166, 0.15); --ov-input-bg: #252d2e; --ov-input-border: rgba(255, 255, 255, 0.14); --ov-input-border-focus: var(--ov-brand-400); --ov-input-text: #e2e8e8; --ov-input-placeholder: #4a6162; --color_1: #1e2526; --color_2: rgba(42, 161, 166, 1); --color_3: rgba(255, 255, 255, 0.5); --color_5: #e2e8e8; } /* OS dark fallback — only applies when no data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-bs-theme="light"]) { --ov-brand: var(--ov-brand-400); --ov-brand-hover: var(--ov-brand-300); --ov-brand-text: #ffffff; --ov-brand-subtle: rgba(42, 161, 166, 0.12); --ov-brand-muted: rgba(42, 161, 166, 0.20); --ov-brand-border: rgba(42, 161, 166, 0.32); --ov-surface-page: #161b1c; --ov-surface-base: #1e2526; --ov-surface-raised: #252d2e; --ov-surface-subtle: #222a2b; --ov-surface-muted: #1a2021; --ov-text-primary: #e2e8e8; --ov-text-secondary: #9aafb0; --ov-text-muted: #6e8a8b; --ov-text-hint: #4a6162; --ov-text-on-brand: #ffffff; --ov-text-link: var(--ov-brand-400); --ov-text-link-hover: var(--ov-brand-300); --ov-border-subtle: rgba(255, 255, 255, 0.05); --ov-border: rgba(255, 255, 255, 0.09); --ov-border-strong: rgba(255, 255, 255, 0.14); --ov-border-brand: var(--ov-brand-border); --ov-surface-danger: rgba(163, 45, 45, 0.22); --ov-surface-warn: rgba(133, 79, 11, 0.22); --ov-surface-success: rgba( 59, 109, 17, 0.22); --ov-surface-info: rgba( 24, 95, 165, 0.22); --ov-border-danger: rgba(240, 90, 90, 0.20); --ov-border-warn: rgba(239, 159, 39, 0.20); --ov-border-success: rgba( 99, 153, 34, 0.20); --ov-border-info: rgba( 55, 138, 221, 0.20); --ov-text-danger: rgba(240, 90, 90, 1); --ov-text-warn: rgba(239, 159, 39, 1); --ov-text-success: rgba( 99, 153, 34, 1); --ov-text-info: rgba( 55, 138, 221, 1); --ov-focus-ring: rgba(42, 161, 166, 0.35); --ov-overlay: rgba(0, 0, 0, 0.65); --ov-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --ov-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35); --ov-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45); --ov-nav-bg: #1e2526; --ov-nav-border: rgba(255, 255, 255, 0.07); --ov-nav-text: #9aafb0; --ov-nav-text-active: var(--ov-brand-400); --ov-nav-item-hover: rgba(42, 161, 166, 0.09); --ov-nav-item-active: rgba(42, 161, 166, 0.15); --ov-input-bg: #252d2e; --ov-input-border: rgba(255, 255, 255, 0.14); --ov-input-border-focus: var(--ov-brand-400); --ov-input-text: #e2e8e8; --ov-input-placeholder: #4a6162; --color_1: #1e2526; --color_2: rgba(42, 161, 166, 1); --color_3: rgba(255, 255, 255, 0.5); --color_5: #e2e8e8; } } /* ═══════════════════════════════════════════════════════════════ BASE ELEMENT STYLES Minimal resets that make standard HTML elements respect the theme tokens. Keep specificity low so site.css can override. ═══════════════════════════════════════════════════════════════ */ html { background-color: var(--ov-surface-page); color: var(--ov-text-primary); /* Smooth transition when toggling — only target color/bg to avoid layout thrash */ transition: background-color 0.20s ease, color 0.20s ease; } body { background-color: var(--ov-surface-page); color: var(--ov-text-primary); } a { color: var(--ov-text-link); text-decoration: none; } a:hover { color: var(--ov-text-link-hover); text-decoration: underline; } /* Generic card / panel surface */ .card, .panel, .ov-surface { background: var(--ov-surface-base); border: 0.5px solid var(--ov-border); color: var(--ov-text-primary); } /* Form controls */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { background-color: var(--ov-input-bg); border-color: var(--ov-input-border); color: var(--ov-input-text); } input::placeholder, textarea::placeholder { color: var(--ov-input-placeholder); } input:focus, select:focus, textarea:focus { border-color: var(--ov-input-border-focus); outline: none; box-shadow: 0 0 0 3px var(--ov-focus-ring); } /* Tables (base — ov-grid.css adds grid-specific styles) */ table { color: var(--ov-text-primary); } th { color: var(--ov-text-muted); } /* ── Theme Toggle Widget ─────────────────────────────────────── */ /* Add anywhere in your layout: */ .ov-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px; border: 0.5px solid var(--ov-border-strong); background: var(--ov-surface-base); color: var(--ov-text-muted); font-size: 12px; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; } .ov-theme-toggle:hover { background: var(--ov-surface-subtle); color: var(--ov-text-primary); border-color: var(--ov-brand-border); }