/* * Palette: Midnight — סגול מלכותי * Usage: loaded before main.css / portal.css / field.css. * Switch themes with ; light is the default. * To swap to a different palette, replace this file with another from themes/. */ /* ─── DARK (default) ─────────────────────────────────────────────────────── */ :root { /* Core surface & text */ --bg: #0a0a12; --card: #13132a; --card-2: #1a1a38; --text: #ede9fe; --muted: #9585ce; --accent: #a78bfa; --accent-hover: #c4b5fd; --border: #2d2a52; --radius: 12px; /* Body background gradient spot */ --bg-gradient-spot: #1a0f40; /* Hover / overlay alpha layers */ --hover-bg: rgba(255, 255, 255, 0.05); --hover-bg-md: rgba(255, 255, 255, 0.08); --overlay-xs: rgba(0, 0, 0, 0.04); --overlay-sm: rgba(0, 0, 0, 0.15); --overlay-md: rgba(0, 0, 0, 0.20); --overlay-lg: rgba(0, 0, 0, 0.25); --modal-overlay: rgba(10, 10, 18, 0.60); /* Sticky bars (portal / field topbar, field complete-bar) */ --topbar-bg: rgba(10, 10, 18, 0.88); --complete-bar-bg: rgba(10, 10, 18, 0.92); /* Map background (field) */ --map-bg: #0a0a12; /* Accent tints — derived from --accent (#a78bfa) */ --accent-tint: rgba(167, 139, 250, 0.10); --accent-tint-active: rgba(167, 139, 250, 0.16); --accent-tint-heavy: rgba(167, 139, 250, 0.22); --accent-border: rgba(167, 139, 250, 0.35); --accent-border-heavy: rgba(167, 139, 250, 0.50); --row-highlight: rgba(167, 139, 250, 0.08); --row-highlight-hover: rgba(167, 139, 250, 0.05); /* Semantic status colours */ --danger: #f87171; --warn: #fb923c; --warn-color: #fbbf24; --success-color: #34d399; --success-tint: rgba(52, 211, 153, 0.12); --success-border: rgba(52, 211, 153, 0.38); --error-tint: rgba(248, 113, 113, 0.12); --error-border: rgba(248, 113, 113, 0.38); --warn-tint: rgba(251, 191, 36, 0.12); --warn-border: rgba(251, 191, 36, 0.40); --warn-banner-tint: rgba(251, 146, 60, 0.10); --warn-banner-border: rgba(251, 146, 60, 0.45); /* ── Portal aliases (portal.css uses --p-* prefix) ── */ --p-bg: var(--bg); --p-card: var(--card); --p-card-2: var(--card-2); --p-text: var(--text); --p-muted: var(--muted); --p-accent: var(--accent); --p-accent-2: var(--accent-hover); --p-green: var(--success-color); --p-warn: var(--warn); --p-danger: var(--danger); --p-border: var(--border); --p-radius: var(--radius); /* ── Field aliases (field.css uses --f-* prefix) ── */ --f-bg: var(--bg); --f-card: var(--card); --f-card-2: var(--card-2); --f-text: var(--text); --f-muted: var(--muted); --f-accent: var(--accent); --f-accent-2: var(--accent-hover); --f-green: var(--success-color); --f-warn: var(--warn); --f-danger: var(--danger); --f-border: var(--border); --f-radius: var(--radius); /* ── Rentals aliases (rentals.css uses --r-* inside .rentals-page) ── */ --r-card: var(--card); --r-card-2: var(--card-2); --r-border: var(--border); --r-accent: var(--accent); --r-accent-2: var(--accent-hover); --r-green: var(--success-color); --r-warn: var(--warn); --r-danger: var(--danger); --r-muted: var(--muted); --r-radius: var(--radius); } /* ─── LIGHT ──────────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Core surface & text */ --bg: #fafaff; --card: #ffffff; --card-2: #f3f0ff; --text: #1e1b4b; --muted: #6d5f9e; --accent: #7c3aed; --accent-hover: #6d28d9; --border: #ddd6fe; /* Body gradient spot */ --bg-gradient-spot: #ede9fe; /* Hover / overlay layers — flipped for light surfaces */ --hover-bg: rgba(0, 0, 0, 0.04); --hover-bg-md: rgba(0, 0, 0, 0.07); --overlay-xs: rgba(0, 0, 0, 0.02); --overlay-sm: rgba(0, 0, 0, 0.04); --overlay-md: rgba(0, 0, 0, 0.06); --overlay-lg: rgba(0, 0, 0, 0.10); --modal-overlay: rgba(30, 27, 75, 0.45); /* Sticky bars */ --topbar-bg: rgba(250, 250, 255, 0.92); --complete-bar-bg: rgba(250, 250, 255, 0.95); /* Map */ --map-bg: #f0eeff; /* Accent tints — derived from --accent (#7c3aed) */ --accent-tint: rgba(124, 58, 237, 0.08); --accent-tint-active: rgba(124, 58, 237, 0.12); --accent-tint-heavy: rgba(124, 58, 237, 0.16); --accent-border: rgba(124, 58, 237, 0.30); --accent-border-heavy: rgba(124, 58, 237, 0.45); --row-highlight: rgba(124, 58, 237, 0.06); --row-highlight-hover: rgba(124, 58, 237, 0.04); /* Semantic status — darker for readability on white */ --danger: #dc2626; --warn: #ea580c; --warn-color: #d97706; --success-color: #059669; --success-tint: rgba(5, 150, 105, 0.10); --success-border: rgba(5, 150, 105, 0.35); --error-tint: rgba(220, 38, 38, 0.10); --error-border: rgba(220, 38, 38, 0.35); --warn-tint: rgba(217, 119, 6, 0.10); --warn-border: rgba(217, 119, 6, 0.38); --warn-banner-tint: rgba(234, 88, 12, 0.08); --warn-banner-border: rgba(234, 88, 12, 0.38); }