/* Shared dark/light theme variables for TrailRace admin pages. Default (no attribute) = dark, matching the existing look of the app. Set data-theme="light" on to switch — see theme.js. */ :root { --tr-bg: #020617; --tr-bg-rgb: 2, 6, 23; --tr-bg-elevated: #0f172a; --tr-bg-elevated-rgb: 15, 23, 42; --tr-bg-subtle: #111827; --tr-border: #334155; --tr-border-soft: #1f2937; --tr-text: #e5e7eb; --tr-text-muted: #9ca3af; --tr-code-text: #cbd5e1; --tr-link: #93c5fd; --tr-link-hover: #bfdbfe; --tr-accent: #38bdf8; --tr-accent-contrast: #04121f; --tr-success: #22c55e; --tr-success-bg: #052e16; --tr-success-text: #bbf7d0; --tr-danger: #ef4444; --tr-danger-bg: #450a0a; --tr-danger-text: #fecaca; --tr-warning: #f59e0b; --tr-warning-bg: #451a03; --tr-warning-text: #fef3c7; --tr-gold-bg: #3a2f00; --tr-gold-text: #fff2b3; --tr-silver-bg: #2a2a2a; --tr-silver-text: #e6e6e6; --tr-bronze-bg: #2b1608; --tr-bronze-text: #ffd7c2; --tr-shadow: rgba(0, 0, 0, 0.35); --tr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } :root[data-theme="light"] { --tr-bg: #f8fafc; --tr-bg-rgb: 248, 250, 252; --tr-bg-elevated: #ffffff; --tr-bg-elevated-rgb: 255, 255, 255; --tr-bg-subtle: #f1f5f9; --tr-border: #e2e8f0; --tr-border-soft: #cbd5e1; --tr-text: #0f172a; --tr-text-muted: #334155; --tr-code-text: #334155; --tr-link: #2563eb; --tr-link-hover: #1d4ed8; --tr-accent: #0284c7; --tr-accent-contrast: #ffffff; --tr-success: #16a34a; --tr-success-bg: #dcfce7; --tr-success-text: #14532d; --tr-danger: #dc2626; --tr-danger-bg: #fee2e2; --tr-danger-text: #7f1d1d; --tr-warning: #d97706; --tr-warning-bg: #fef3c7; --tr-warning-text: #78350f; --tr-gold-bg: #fef3c7; --tr-gold-text: #78350f; --tr-silver-bg: #f1f5f9; --tr-silver-text: #334155; --tr-bronze-bg: #fee2d5; --tr-bronze-text: #7c2d12; --tr-shadow: rgba(15, 23, 42, 0.08); } .theme-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--tr-border); background: var(--tr-bg-elevated); color: var(--tr-text); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--tr-font); } .theme-toggle:hover { border-color: var(--tr-accent); }