/* Shared light/dark chrome. The effective theme is written to before paint. */ :root { --site-bg: #f8fafc; --site-surface: #ffffff; --site-surface-raised: #ffffff; --site-surface-soft: #f8fafc; --site-text: #172033; --site-muted: #64748b; --site-border: #e2e8f0; --site-accent: #f59e0b; --site-accent-soft: #fff8e8; --site-focus: rgba(245, 158, 11, .4); --site-shadow: rgba(15, 23, 42, .14); } :root[data-site-theme="dark"] { --site-bg: #080d17; --site-surface: #111827; --site-surface-raised: #172033; --site-surface-soft: #1e293b; --site-text: #f1f5f9; --site-muted: #a8b3c4; --site-border: #334155; --site-accent: #fbbf24; --site-accent-soft: #3a2a0b; --site-focus: rgba(251, 191, 36, .52); --site-shadow: rgba(0, 0, 0, .42); } :root[data-site-theme="dark"] { background: var(--site-bg); } :root[data-site-theme="dark"] body { color: var(--site-text); } :root[data-site-theme="dark"] .site-mode-tabs { border-color: #2e3b50; background: rgba(13, 20, 33, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); } :root[data-site-theme="dark"] .site-mode-tab { color: #b9c4d3; } :root[data-site-theme="dark"] .site-mode-tab:hover { background: #1b2638; color: #ffffff; } :root[data-site-theme="dark"] .site-mode-tab.active { background: #f5f7fb; color: #101827; box-shadow: 0 5px 16px rgba(0, 0, 0, .32); } :root[data-site-theme="dark"] .site-text-size-trigger, :root[data-site-theme="dark"] .site-display-trigger { border-color: #3a475b; background: linear-gradient(180deg, #202c40, #172033); color: #f1f5f9; box-shadow: 0 5px 14px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06); } :root[data-site-theme="dark"] .site-text-size-trigger:hover, :root[data-site-theme="dark"] .site-display-trigger:hover, :root[data-site-theme="dark"] .site-text-size-trigger[aria-expanded="true"], :root[data-site-theme="dark"] .site-display-trigger[aria-expanded="true"] { border-color: #f6bd32; background: #2c2413; } :root[data-site-theme="dark"] .site-text-size-mark { background: #fbbf24; color: #111827; } :root[data-site-theme="dark"] .site-text-size-chevron { color: #a8b3c4; } :root[data-site-theme="dark"] .site-text-size-menu, :root[data-site-theme="dark"] .site-display-panel { border-color: #3a475b; background: rgba(17, 24, 39, .98); box-shadow: 0 22px 50px rgba(0, 0, 0, .52), 0 3px 12px rgba(0, 0, 0, .3); } :root[data-site-theme="dark"] .site-display-section + .site-display-section { border-top-color: #334155; } :root[data-site-theme="dark"] .site-display-section-heading > strong { color: #f1f5f9; } :root[data-site-theme="dark"] .site-display-section-heading > span { color: #a8b3c4; } :root[data-site-theme="dark"] .site-display-options > button { border-color: #38465a; background: #1b2638; color: #dbe4ef; } :root[data-site-theme="dark"] .site-display-options > button:hover { border-color: #e9ad23; background: #302713; color: #ffffff; } :root[data-site-theme="dark"] .site-display-options > button[aria-pressed="true"] { border-color: #fbbf24; background: #fbbf24; color: #111827; box-shadow: 0 7px 16px rgba(0, 0, 0, .3); } :root[data-site-theme="dark"] .site-display-options > button > small { color: #9eabba; } :root[data-site-theme="dark"] .site-display-options > button[aria-pressed="true"] > small { color: #4b3404; } :root[data-site-theme="dark"] .site-text-size-option-mark { background: #334155; color: #e2e8f0; } :root[data-site-theme="dark"] .site-display-options > button[aria-pressed="true"] .site-text-size-option-mark { background: #111827; color: #fbbf24; } :root[data-site-theme="dark"] .site-text-size-trigger:focus-visible, :root[data-site-theme="dark"] .site-display-trigger:focus-visible, :root[data-site-theme="dark"] .site-display-options > button:focus-visible { outline-color: var(--site-focus); } @media print { :root, :root[data-site-theme="dark"] { color-scheme: light !important; background: #ffffff !important; } :root[data-site-theme="dark"] body { background: #ffffff !important; color: #111827 !important; } }