/* ============================================================ Moonland · Light-Mode CSS Variable Override Active only when . Loaded after moonland.css so these values win. ============================================================ */ :root[data-theme="light"] { /* —— Surface · 浅色表层 —— */ --void: #ffffff; --space: #f7f9fc; --space-2: #eef2f7; --space-3: #e4eaf2; --space-4: #f0f4f9; --panel: #ffffff; --panel-soft: #f7f9fc; --panel-deep: #ffffff; --panel-2: #ffffff; --panel-3: #ffffff; --bg-input: #f7f9fc; /* —— Lines · 浅色描边 —— */ --line: #e1e8f0; --line-soft: #eef2f7; --line-strong: #d1dce8; --line-magenta:rgba(139, 92, 246, 0.4); /* —— Brand Colors · 浅色品牌 —— */ --cyan: #1a73e8; --cyan-2: #4285f4; --cyan-3: #1557b0; --cyan-dim: #1557b0; --cyan-deep: #c5d7f3; --cyan-04: rgba(26, 115, 232, 0.04); --cyan-06: rgba(26, 115, 232, 0.06); --cyan-08: rgba(26, 115, 232, 0.08); --cyan-10: rgba(26, 115, 232, 0.10); --cyan-12: rgba(26, 115, 232, 0.12); --cyan-18: rgba(26, 115, 232, 0.18); --cyan-22: rgba(26, 115, 232, 0.22); --cyan-30: rgba(26, 115, 232, 0.30); --cyan-35: rgba(26, 115, 232, 0.35); --cyan-40: rgba(26, 115, 232, 0.40); --cyan-50: rgba(26, 115, 232, 0.50); --cyan-60: rgba(26, 115, 232, 0.60); --magenta: #ec4899; --magenta-08: rgba(236, 72, 153, 0.08); --magenta-15: rgba(236, 72, 153, 0.15); --magenta-22: rgba(236, 72, 153, 0.22); --magenta-30: rgba(236, 72, 153, 0.30); --violet: #8b5cf6; --violet-15: rgba(139, 92, 246, 0.15); --violet-30: rgba(139, 92, 246, 0.30); --amber: #f59e0b; --amber-2: #d97706; --amber-dim: #d97706; --amber-02: rgba(245, 158, 11, 0.02); --amber-06: rgba(245, 158, 11, 0.06); --amber-08: rgba(245, 158, 11, 0.08); --amber-22: rgba(245, 158, 11, 0.22); --amber-35: rgba(245, 158, 11, 0.35); --amber-60: rgba(245, 158, 11, 0.60); --green: #10b981; --red: #ef4444; --red-08: rgba(239, 68, 68, 0.08); --red-15: rgba(239, 68, 68, 0.15); --red-25: rgba(239, 68, 68, 0.25); --blue: #1a73e8; --gold: #f59e0b; /* —— Type Colors · 浅色文字 —— */ --silver: #1f2937; --moon: #ffffff; --text: #374151; --text-soft: #6b7280; --text-dim: #9ca3af; --text-faint: #d1d5db; /* —— Shadows · 浅色投影 —— */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-glow: none; --shadow-glow-l: none; --shadow-magenta:none; --shadow-amber: none; --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.06); --shadow-2: 0 0 18px rgba(26, 115, 232, 0.20); --black-30: rgba(0, 0, 0, 0.3); --black-50: rgba(0, 0, 0, 0.5); --black-60: rgba(0, 0, 0, 0.6); --white-06: rgba(0, 0, 0, 0.04); --white-08: rgba(0, 0, 0, 0.06); --white-30: rgba(0, 0, 0, 0.10); --white-50: rgba(0, 0, 0, 0.20); --white-70: rgba(0, 0, 0, 0.40); /* —— Radii & Geometry · 沿用 —— */ --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; --bevel: 14px; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Menlo', monospace; --font-serif: 'Noto Serif SC', 'Source Han Serif SC', serif; --font-disp: 'Orbitron', 'Inter', 'PingFang SC', sans-serif; } /* ============================================================ Light-mode rules for the static-class HTML (mostly used by MoonlandHome's .hero / .card / .telemetry / .band sections). The React UI primarily uses inline styles + var(--token) so most of these only matter when a class still survives. ============================================================ */ :root[data-theme="light"] html, :root[data-theme="light"] body { background: var(--space); color: var(--text); } :root[data-theme="light"] body::before, :root[data-theme="light"] body::after { display: none !important; } :root[data-theme="light"] .grid-overlay, :root[data-theme="light"] .vignette { display: none !important; } :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] h4 { color: var(--silver); } :root[data-theme="light"] a { color: var(--cyan); } :root[data-theme="light"] .eyebrow { color: var(--cyan); } :root[data-theme="light"] .eyebrow::before { background: var(--cyan); box-shadow: none; } :root[data-theme="light"] .topnav { background: #ffffff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .topnav::after { display: none; } :root[data-theme="light"] .topnav .brand { color: var(--silver); } :root[data-theme="light"] .topnav nav a { color: var(--text-soft); } :root[data-theme="light"] .topnav nav a:hover, :root[data-theme="light"] .topnav nav a.active { color: var(--cyan); text-shadow: none; } :root[data-theme="light"] .hero { background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%); } :root[data-theme="light"] .scan-line { display: none; } :root[data-theme="light"] .hero h1 .glow { background: linear-gradient(120deg, var(--cyan) 0%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; } :root[data-theme="light"] .hero p.lead { color: var(--text); } :root[data-theme="light"] .system-bar { background: #ffffff; color: var(--text-soft); border-color: var(--line); } :root[data-theme="light"] .nav-status { background: rgba(16, 185, 129, 0.08); color: var(--green); border-color: rgba(16, 185, 129, 0.3); } :root[data-theme="light"] .particles { display: none; } :root[data-theme="light"] .card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } :root[data-theme="light"] .card .ic { background: rgba(26, 115, 232, 0.08) !important; color: var(--cyan) !important; border-color: rgba(26, 115, 232, 0.2) !important; } :root[data-theme="light"] .telemetry { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } :root[data-theme="light"] .telemetry::before, :root[data-theme="light"] .telemetry::after { display: none; } :root[data-theme="light"] .telemetry .head { color: var(--cyan); border-bottom-color: var(--line-soft); } :root[data-theme="light"] .t-row { border-bottom-color: var(--line-soft); } :root[data-theme="light"] .t-row .l { color: var(--text-dim); } :root[data-theme="light"] .t-row .v { color: var(--silver); } :root[data-theme="light"] .t-row .v.big { color: var(--cyan); text-shadow: none; } :root[data-theme="light"] .band { background: var(--space-2); border-color: var(--line-soft); } :root[data-theme="light"] section + section { border-top-color: var(--line-soft); } :root[data-theme="light"] footer { background: var(--space-2); border-top-color: var(--line); color: var(--text-soft); } :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #ffffff; border: 1px solid var(--line); border-radius: 8px; color: var(--text); } :root[data-theme="light"] input:focus, :root[data-theme="light"] textarea:focus, :root[data-theme="light"] select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1); outline: none; }