Add automatic system light and dark themes

assets/css/app.css

@@ -22,6 +22,88 @@
     --track-accent: rgba(139, 228, 255, 0.34);
     --track-surface: rgba(255, 255, 255, 0.08);
     --track-glow: rgba(139, 228, 255, 0.18);
+    --body-radial-one: radial-gradient(circle at 18% 18%, rgba(76, 171, 255, 0.24), transparent 34%);
+    --body-radial-two: radial-gradient(circle at 82% 12%, rgba(113, 255, 210, 0.18), transparent 28%);
+    --body-gradient: linear-gradient(145deg, #07111b 0%, #0b1e2e 35%, #13273b 65%, #08111b 100%);
+    --panel-gradient-top: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
+    --panel-gradient-accent: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 48%);
+    --pill-bg: rgba(255, 255, 255, 0.12);
+    --pill-border: rgba(255, 255, 255, 0.12);
+    --input-bg: rgba(255, 255, 255, 0.09);
+    --input-bg-focus: rgba(255, 255, 255, 0.12);
+    --input-border: rgba(255, 255, 255, 0.14);
+    --input-border-soft: rgba(255, 255, 255, 0.12);
+    --nav-hover-bg: rgba(255, 255, 255, 0.13);
+    --user-chip-bg: rgba(255, 255, 255, 0.1);
+    --eyebrow-color: rgba(239, 247, 255, 0.62);
+    --chart-axis-color: rgba(255, 255, 255, 0.1);
+    --chart-label-color: rgba(239, 247, 255, 0.65);
+    --chart-value-color: rgba(239, 247, 255, 0.9);
+    --line-point-stroke: rgba(7, 17, 27, 0.9);
+    --bar-grid-color: rgba(255, 255, 255, 0.08);
+    --calendar-detail-bg: rgba(255, 255, 255, 0.08);
+    --calendar-detail-border: rgba(255, 255, 255, 0.1);
+    --calendar-detail-eyebrow: rgba(239, 247, 255, 0.58);
+    --calendar-selected-stroke: rgba(255, 255, 255, 0.9);
+    --control-soft-bg: rgba(255, 255, 255, 0.08);
+    --control-soft-border: rgba(255, 255, 255, 0.16);
+    --brand-shadow: 0 10px 24px rgba(9, 25, 40, 0.22);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --bg: #eef4fa;
+        --bg-soft: #dce8f2;
+        --surface: rgba(255, 255, 255, 0.72);
+        --surface-strong: rgba(255, 255, 255, 0.86);
+        --surface-border: rgba(120, 146, 172, 0.24);
+        --text: #12304b;
+        --muted: rgba(18, 48, 75, 0.66);
+        --shadow: 0 24px 60px rgba(78, 105, 130, 0.16);
+        --primary: #5abcf2;
+        --primary-strong: #1494de;
+        --accent: #63d9b4;
+        --warm: #ee9f63;
+        --danger: #db6b6b;
+        --good: #45c98d;
+        --track-accent: rgba(67, 153, 212, 0.22);
+        --track-surface: rgba(255, 255, 255, 0.46);
+        --track-glow: rgba(104, 201, 255, 0.16);
+        --body-radial-one: radial-gradient(circle at 18% 18%, rgba(115, 196, 255, 0.28), transparent 34%);
+        --body-radial-two: radial-gradient(circle at 82% 12%, rgba(129, 232, 212, 0.24), transparent 28%);
+        --body-gradient: linear-gradient(145deg, #eef5fb 0%, #e4eff7 40%, #d8e9f4 72%, #edf5fa 100%);
+        --panel-gradient-top: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58));
+        --panel-gradient-accent: radial-gradient(circle at top left, rgba(123, 190, 255, 0.18), transparent 48%);
+        --pill-bg: rgba(255, 255, 255, 0.54);
+        --pill-border: rgba(130, 158, 185, 0.22);
+        --input-bg: rgba(255, 255, 255, 0.62);
+        --input-bg-focus: rgba(255, 255, 255, 0.82);
+        --input-border: rgba(123, 153, 182, 0.26);
+        --input-border-soft: rgba(123, 153, 182, 0.22);
+        --nav-hover-bg: rgba(255, 255, 255, 0.56);
+        --user-chip-bg: rgba(255, 255, 255, 0.54);
+        --eyebrow-color: rgba(18, 48, 75, 0.5);
+        --chart-axis-color: rgba(18, 48, 75, 0.12);
+        --chart-label-color: rgba(18, 48, 75, 0.58);
+        --chart-value-color: rgba(18, 48, 75, 0.86);
+        --line-point-stroke: rgba(255, 255, 255, 0.95);
+        --bar-grid-color: rgba(18, 48, 75, 0.08);
+        --calendar-detail-bg: rgba(255, 255, 255, 0.6);
+        --calendar-detail-border: rgba(120, 146, 172, 0.18);
+        --calendar-detail-eyebrow: rgba(18, 48, 75, 0.48);
+        --calendar-selected-stroke: rgba(18, 48, 75, 0.52);
+        --control-soft-bg: rgba(255, 255, 255, 0.58);
+        --control-soft-border: rgba(123, 153, 182, 0.22);
+        --brand-shadow: 0 10px 24px rgba(82, 111, 138, 0.14);
+    }
+
+    html {
+        color-scheme: light;
+    }
+
+    select {
+        color-scheme: light;
+    }
 }
 
 *,
@@ -40,9 +122,9 @@ body {
     min-height: 100vh;
     font-family: var(--font-ui);
     background:
-        radial-gradient(circle at 18% 18%, rgba(76, 171, 255, 0.24), transparent 34%),
+        var(--body-radial-one),
-        radial-gradient(circle at 82% 12%, rgba(113, 255, 210, 0.18), transparent 28%),
+        var(--body-radial-two),
-        linear-gradient(145deg, #07111b 0%, #0b1e2e 35%, #13273b 65%, #08111b 100%);
+        var(--body-gradient);
     color: var(--text);
 }
 
@@ -103,8 +185,8 @@ button {
 .glass-panel {
     border: 1px solid var(--surface-border);
     background:
-        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
+        var(--panel-gradient-top),
-        radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 48%);
+        var(--panel-gradient-accent);
     backdrop-filter: blur(var(--panel-blur)) saturate(150%);
     -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(150%);
     box-shadow: var(--shadow);
@@ -149,9 +231,9 @@ button {
     align-items: center;
     padding: 0.48rem 0.8rem;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.12);
+    background: var(--pill-bg);
     color: var(--muted);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--pill-border);
     font-size: 0.88rem;
     letter-spacing: 0.01em;
 }
@@ -167,10 +249,10 @@ button {
 .topbar-date-input {
     width: auto;
     min-height: 2.2rem;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid var(--input-border-soft);
     border-radius: 999px;
     padding: 0.45rem 0.9rem;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--control-soft-bg);
     color: var(--text);
 }
 
@@ -195,7 +277,7 @@ button {
     place-items: center;
     border-radius: 18px;
     overflow: hidden;
-    box-shadow: 0 10px 24px rgba(9, 25, 40, 0.22);
+    box-shadow: var(--brand-shadow);
 }
 
 .brand-mark img {
@@ -222,7 +304,7 @@ button {
     margin: 0 0 0.28rem;
     text-transform: uppercase;
     letter-spacing: 0.14em;
-    color: rgba(239, 247, 255, 0.62);
+    color: var(--eyebrow-color);
     font-size: 0.74rem;
 }
 
@@ -244,7 +326,7 @@ button {
 
 .main-nav a:hover,
 .main-nav a.active {
-    background: rgba(255, 255, 255, 0.13);
+    background: var(--nav-hover-bg);
     color: var(--text);
     transform: translateX(2px);
 }
@@ -269,7 +351,7 @@ button {
     gap: 0.75rem;
     padding: 0.9rem 1rem;
     border-radius: 18px;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--user-chip-bg);
 }
 
 .user-chip__name {
@@ -415,8 +497,8 @@ button {
     margin-bottom: 1rem;
     padding: 0.9rem 1rem;
     border-radius: 18px;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--calendar-detail-bg);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--calendar-detail-border);
 }
 
 .calendar-detail__meta {
@@ -425,7 +507,7 @@ button {
 }
 
 .calendar-detail__eyebrow {
-    color: rgba(239, 247, 255, 0.58);
+    color: var(--calendar-detail-eyebrow);
     font-size: 0.78rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -537,7 +619,7 @@ button {
 }
 
 .calendar-cell--selected {
-    stroke: rgba(255, 255, 255, 0.9);
+    stroke: var(--calendar-selected-stroke);
     stroke-width: 1.2;
     filter: brightness(1.08);
 }
@@ -566,7 +648,7 @@ button {
 }
 
 .line-point {
-    stroke: rgba(7, 17, 27, 0.9);
+    stroke: var(--line-point-stroke);
     stroke-width: 1.5;
 }
 
@@ -579,7 +661,7 @@ button {
 }
 
 .chart-axis {
-    stroke: rgba(255, 255, 255, 0.1);
+    stroke: var(--chart-axis-color);
     stroke-width: 1;
 }
 
@@ -589,12 +671,12 @@ button {
 }
 
 .chart-label {
-    fill: rgba(239, 247, 255, 0.65);
+    fill: var(--chart-label-color);
     font-size: 11px;
 }
 
 .chart-value {
-    fill: rgba(239, 247, 255, 0.9);
+    fill: var(--chart-value-color);
     font-size: 15px;
     font-weight: 700;
 }
@@ -607,7 +689,7 @@ button {
 }
 
 .bar-grid {
-    fill: rgba(255, 255, 255, 0.08);
+    fill: var(--bar-grid-color);
 }
 
 .bar-segment--sport {
@@ -619,12 +701,12 @@ button {
 }
 
 .bar-label {
-    fill: rgba(239, 247, 255, 0.62);
+    fill: var(--chart-label-color);
     font-size: 11px;
 }
 
 .bar-value {
-    fill: rgba(239, 247, 255, 0.82);
+    fill: var(--chart-value-color);
     font-size: 10px;
     text-anchor: middle;
 }
@@ -773,9 +855,9 @@ input[type="date"],
 select,
 textarea {
     width: 100%;
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid var(--input-border);
     border-radius: 16px;
-    background: rgba(255, 255, 255, 0.09);
+    background: var(--input-bg);
     color: var(--text);
     padding: 0.9rem 1rem;
     outline: none;
@@ -788,7 +870,7 @@ select {
 
 option,
 optgroup {
-    background: #10253a;
+    background: var(--bg-soft);
     color: var(--text);
 }
 
@@ -796,7 +878,7 @@ input:focus,
 select:focus,
 textarea:focus {
     border-color: rgba(139, 228, 255, 0.5);
-    background: rgba(255, 255, 255, 0.12);
+    background: var(--input-bg-focus);
     transform: translateY(-1px);
 }
 
@@ -950,8 +1032,8 @@ input[type="range"] {
 .ghost-button,
 .ghost-link {
     color: var(--text);
-    border: 1px solid rgba(255, 255, 255, 0.16);
+    border: 1px solid var(--control-soft-border);
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--control-soft-bg);
 }
 
 .ghost-link {