/* Theme overrides — switch via */
/* ── Pro (default): Liquid Glass — readable translucent UI (Apple‑inspired) ─
Soft atmospheric backdrop + frosted panels (blur + satin + inset highlight).
Map regions stay dark basemaps; labels on the overlay use light “chrome” text. */
html[data-theme="pro"] {
color-scheme: light;
--bg-deep: transparent;
--bg-base: rgba(255, 255, 255, 0.38);
--bg-card: rgba(255, 255, 255, 0.55);
--bg-card-hover: rgba(255, 255, 255, 0.72);
--bg-surface: rgba(255, 255, 255, 0.32);
--bg-elevated: rgba(255, 255, 255, 0.82);
--border: rgba(0, 0, 0, 0.085);
--border-light: rgba(0, 0, 0, 0.11);
--border-soft: rgba(255, 255, 255, 0.55);
--accent: #0071e3;
--accent-dim: #005bbf;
--accent-glow: rgba(0, 113, 227, 0.16);
--coral: #ff9500;
--coral-dim: #cc7700;
--blue: #0a84ff;
--blue-dim: #0077e6;
--text: #1d1d1f;
--text-muted: #49494e;
--text-dim: #717176;
--on-accent: #ffffff;
--map-overlay-end: rgba(20, 24, 32, 0.88);
--map-chrome-label: rgba(255, 255, 255, 0.95);
--map-chrome-muted: rgba(255, 255, 255, 0.78);
--shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 25, 60, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
--shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(10, 40, 80, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.62);
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI",
system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
html[data-theme="pro"] body {
background-color: #c5d4e8;
background-image: radial-gradient(1200px 800px at 12% -10%, rgba(255, 255, 255, 0.45), transparent),
radial-gradient(900px 600px at 88% 0%, rgba(120, 180, 255, 0.22), transparent),
radial-gradient(100% 100% at 50% 100%, rgba(255, 255, 255, 0.2), transparent),
linear-gradient(168deg, #dbe4ef 0%, #cfd9e8 42%, #c3cee3 72%, #b9c7dc 100%);
background-attachment: fixed;
color: var(--text);
}
html[data-theme="pro"] .header {
background: rgba(255, 255, 255, 0.34);
border-bottom-color: var(--border);
backdrop-filter: saturate(185%) blur(22px);
-webkit-backdrop-filter: saturate(185%) blur(22px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, var(--shadow);
}
html[data-theme="pro"] .panel-controls {
background: rgba(255, 255, 255, 0.3);
border-right-color: var(--border);
backdrop-filter: saturate(185%) blur(26px);
-webkit-backdrop-filter: saturate(185%) blur(26px);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.35) inset;
}
html[data-theme="pro"] .panel-results {
background: transparent;
}
html[data-theme="pro"] .map-container {
border-color: rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-lg);
}
html[data-theme="pro"] .map-overlay {
color: var(--map-chrome-muted);
}
html[data-theme="pro"] #map .leaflet-control-attribution {
background: rgba(255, 255, 255, 0.82) !important;
color: var(--text-dim) !important;
}
html[data-theme="pro"] .water-toggle {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
html[data-theme="pro"] .data-cards {
filter: drop-shadow(0 2px 14px rgba(0, 20, 50, 0.06));
}
html[data-theme="pro"] .data-card,
html[data-theme="pro"] .feature,
html[data-theme="pro"] .species-pin-feedback,
html[data-theme="pro"] .place-suggest-list {
background: rgba(255, 255, 255, 0.62);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-color: var(--border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html[data-theme="pro"] .species-pin-feedback {
box-shadow: var(--shadow);
}
html[data-theme="pro"] .recommendations {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.55);
backdrop-filter: saturate(185%) blur(22px);
-webkit-backdrop-filter: saturate(185%) blur(22px);
box-shadow: var(--shadow-lg);
}
html[data-theme="pro"] .chat-section {
background: rgba(255, 255, 255, 0.58);
backdrop-filter: saturate(185%) blur(20px);
-webkit-backdrop-filter: saturate(185%) blur(20px);
border-color: var(--border);
box-shadow: var(--shadow);
}
html[data-theme="pro"] .trip-map-shell {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-color: var(--border);
box-shadow: var(--shadow-lg);
}
html[data-theme="pro"] .recommendations .day-plan {
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
html[data-theme="pro"] .recommendations .bait-rec,
html[data-theme="pro"] .recommendations .time-slot {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
html[data-theme="pro"] .recommendations .tip-card {
background: rgba(0, 113, 227, 0.06);
}
html[data-theme="pro"] .recommendations .reg-warning {
background: rgba(255, 149, 0, 0.1);
}
html[data-theme="pro"] .panel-results::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.2);
}
html[data-theme="pro"] textarea,
html[data-theme="pro"] input[type="text"],
html[data-theme="pro"] select {
background: rgba(255, 255, 255, 0.82);
}
html[data-theme="pro"] #tripMap .leaflet-control-attribution {
background: rgba(255, 255, 255, 0.75) !important;
color: #3a3a3c !important;
}
/* ── Editorial: warm dark, serif headlines, sea-teal + rust ───────────── */
html[data-theme="editorial"] {
--bg-deep: #12100e;
--bg-base: #1a1714;
--bg-card: #221e1a;
--bg-card-hover: #2a2520;
--bg-surface: #2f2923;
--border: #3d3630;
--border-light: #4a423a;
--accent: #2dd4bf;
--accent-dim: #14b8a6;
--accent-glow: rgba(45, 212, 191, 0.12);
--coral: #c2410c;
--coral-dim: #9a3412;
--blue: #5eead4;
--blue-dim: #2dd4bf;
--text: #e8e4dc;
--text-muted: #a8a29e;
--text-dim: #78716c;
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--on-accent: #0c0a09;
--map-overlay-end: rgba(18, 16, 14, 0.94);
}
html[data-theme="editorial"] .recommendations {
line-height: 1.78;
}
html[data-theme="editorial"] .logo h1 {
font-weight: 700;
letter-spacing: -0.01em;
}
/* ── Glass: gradient backdrop, frosted panels ─────────────────────────── */
html[data-theme="glass"] {
--bg-deep: transparent;
--bg-base: rgba(255, 255, 255, 0.04);
--bg-card: rgba(255, 255, 255, 0.07);
--bg-card-hover: rgba(255, 255, 255, 0.1);
--bg-surface: rgba(255, 255, 255, 0.12);
--border: rgba(255, 255, 255, 0.1);
--border-light: rgba(255, 255, 255, 0.16);
--accent: #38bdf8;
--accent-dim: #0ea5e9;
--accent-glow: rgba(56, 189, 248, 0.15);
--coral: #fbbf24;
--coral-dim: #f59e0b;
--blue: #a5b4fc;
--blue-dim: #818cf8;
--text: #f1f5f9;
--text-muted: #94a3b8;
--text-dim: #64748b;
--on-accent: #020617;
--map-overlay-end: rgba(15, 23, 42, 0.88);
}
html[data-theme="glass"] body {
background: linear-gradient(155deg, #0c1220 0%, #1e293b 38%, #0f172a 72%, #020617 100%);
background-attachment: fixed;
}
html[data-theme="glass"] .header {
background: rgba(255, 255, 255, 0.035);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="glass"] .panel-controls {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-right-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="glass"] .panel-results {
background: transparent;
}
html[data-theme="glass"] .map-container,
html[data-theme="glass"] .recommendations,
html[data-theme="glass"] .chat-section {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
/* ── Vintage: cream paper, brass, tackle-box feel ───────────────────────── */
html[data-theme="vintage"] {
--bg-deep: #e5e0d4;
--bg-base: #dcd6c8;
--bg-card: #f2ede4;
--bg-card-hover: #ebe5da;
--bg-surface: #d4cdc0;
--border: #c4bdb0;
--border-light: #a8a198;
--accent: #a16207;
--accent-dim: #854d0e;
--accent-glow: rgba(161, 98, 7, 0.15);
--coral: #991b1b;
--coral-dim: #7f1d1d;
--blue: #b45309;
--blue-dim: #92400e;
--text: #1c1917;
--text-muted: #57534e;
--text-dim: #78716c;
--font-display: 'Sora', system-ui, sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--on-accent: #1c1917;
--map-overlay-end: rgba(245, 241, 232, 0.95);
}
html[data-theme="vintage"] .map-overlay {
color: var(--text-muted);
}
html[data-theme="vintage"] .map-container {
border-width: 2px;
border-color: var(--border-light);
}
html[data-theme="vintage"] .recommendations,
html[data-theme="vintage"] .chat-section {
border-width: 2px;
}
/* ── Command: terminal / briefing, cyan on black, monospace data ───────── */
html[data-theme="command"] {
--bg-deep: #050505;
--bg-base: #0a0a0a;
--bg-card: #111111;
--bg-card-hover: #161616;
--bg-surface: #1a1a1a;
--border: #262626;
--border-light: #333333;
--accent: #22d3ee;
--accent-dim: #06b6d4;
--accent-glow: rgba(34, 211, 238, 0.12);
--coral: #f97316;
--coral-dim: #ea580c;
--blue: #67e8f9;
--blue-dim: #22d3ee;
--text: #e5e5e5;
--text-muted: #a3a3a3;
--text-dim: #737373;
--font-display: 'JetBrains Mono', ui-monospace, monospace;
--font-body: 'DM Sans', system-ui, sans-serif;
--radius: 6px;
--radius-sm: 4px;
--radius-lg: 8px;
--on-accent: #030712;
--map-overlay-end: rgba(5, 5, 5, 0.94);
}
html[data-theme="command"] .logo h1 {
font-weight: 700;
letter-spacing: -0.03em;
}
html[data-theme="command"] .data-card-label,
html[data-theme="command"] .data-card-value,
html[data-theme="command"] .data-card-sub,
html[data-theme="command"] .location-coords {
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[data-theme="command"] .data-card-value {
font-size: 1.05rem;
font-weight: 600;
}
html[data-theme="command"] .btn-analyze,
html[data-theme="command"] .btn-locate {
border-radius: var(--radius-sm);
}
html[data-theme="command"] .chat-input-row input {
border-radius: var(--radius-sm);
}
html[data-theme="command"] .chat-send {
border-radius: var(--radius-sm);
}