/* ============================================================================= AL-KINZ Internet — Themes Two INDEPENDENT, individually-designed palettes (not a mechanical invert). Authoritative selector: [data-theme="dark"] / [data-theme="light"] on . ========================================================================== */ /* --------------------------------------------------------------------------- LIGHT — "Vault Daylight": warm parchment, deep ink, antique-gold accent. -------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --bg: var(--sand-100); --bg-grain: 0.025; --surface: var(--sand-0); --surface-2: var(--sand-50); --surface-3: var(--sand-200); --surface-inset: var(--sand-100); --border: var(--sand-300); --border-strong: var(--sand-400); --divider: var(--sand-200); --text: #1A1D23; --text-2: #54606E; --text-muted: #8A93A0; --text-inverse: var(--sand-0); --accent: var(--gold-600); --accent-hover: var(--gold-700); --accent-press: var(--gold-800); --accent-soft: var(--gold-50); --accent-soft-border: var(--gold-200); --accent-on: #FFFFFF; --accent-ring: color-mix(in srgb, var(--gold-600) 45%, transparent); --ok: var(--emerald-600); --ok-soft: color-mix(in srgb, var(--emerald-500) 14%, var(--sand-0)); --ok-border: color-mix(in srgb, var(--emerald-600) 35%, transparent); --warn: var(--amber-600); --warn-soft: color-mix(in srgb, var(--amber-500) 16%, var(--sand-0)); --warn-border: color-mix(in srgb, var(--amber-600) 35%, transparent); --danger: var(--red-600); --danger-soft: color-mix(in srgb, var(--red-500) 12%, var(--sand-0)); --danger-border: color-mix(in srgb, var(--red-600) 35%, transparent); --info: var(--azure-600); --info-soft: color-mix(in srgb, var(--azure-500) 12%, var(--sand-0)); --info-border: color-mix(in srgb, var(--azure-600) 32%, transparent); --ring: var(--accent-ring); --shadow-1: 0 1px 2px rgba(40, 33, 12, 0.06), 0 1px 3px rgba(40, 33, 12, 0.05); --shadow-2: 0 4px 12px rgba(40, 33, 12, 0.08), 0 2px 4px rgba(40, 33, 12, 0.05); --shadow-3: 0 18px 40px rgba(40, 33, 12, 0.14), 0 6px 14px rgba(40, 33, 12, 0.08); --shadow-accent: 0 8px 24px color-mix(in srgb, var(--gold-500) 28%, transparent); --scrollbar-thumb: var(--sand-400); --scrollbar-track: transparent; --backdrop: color-mix(in srgb, #2A210C 42%, transparent); /* gradient atmosphere */ --grad-brand: linear-gradient(135deg, var(--gold-600), var(--gold-400)); --grad-surface: linear-gradient(180deg, var(--sand-0), var(--sand-50)); --glow-accent: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--gold-400) 18%, transparent), transparent 70%); /* chart series */ --c-1: var(--gold-500); --c-2: var(--emerald-600); --c-3: var(--azure-600); --c-4: var(--amber-600); --c-5: #8E6FC4; --c-grid: color-mix(in srgb, var(--sand-400) 55%, transparent); --c-axis: var(--text-muted); } /* --------------------------------------------------------------------------- DARK — "Obsidian Vault": deep cool obsidian, signature gold, calm contrast. -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --bg: var(--ink-50); --bg-grain: 0.04; --surface: var(--ink-100); --surface-2: var(--ink-200); --surface-3: var(--ink-300); --surface-inset: var(--ink-0); --border: var(--ink-300); --border-strong: var(--ink-400); --divider: color-mix(in srgb, var(--ink-300) 70%, transparent); --text: var(--ink-900); --text-2: var(--ink-700); --text-muted: var(--ink-600); --text-inverse: var(--ink-50); --accent: var(--gold-400); --accent-hover: var(--gold-300); --accent-press: var(--gold-500); --accent-soft: color-mix(in srgb, var(--gold-400) 14%, var(--ink-100)); --accent-soft-border: color-mix(in srgb, var(--gold-400) 30%, transparent); --accent-on: #1A1408; --accent-ring: color-mix(in srgb, var(--gold-400) 55%, transparent); --ok: var(--emerald-400); --ok-soft: color-mix(in srgb, var(--emerald-500) 16%, var(--ink-100)); --ok-border: color-mix(in srgb, var(--emerald-400) 34%, transparent); --warn: var(--amber-400); --warn-soft: color-mix(in srgb, var(--amber-500) 18%, var(--ink-100)); --warn-border: color-mix(in srgb, var(--amber-400) 34%, transparent); --danger: var(--red-400); --danger-soft: color-mix(in srgb, var(--red-500) 18%, var(--ink-100)); --danger-border: color-mix(in srgb, var(--red-400) 34%, transparent); --info: var(--azure-400); --info-soft: color-mix(in srgb, var(--azure-500) 16%, var(--ink-100)); --info-border: color-mix(in srgb, var(--azure-400) 32%, transparent); --ring: var(--accent-ring); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-3: 0 24px 50px rgba(0, 0, 0, 0.6), 0 8px 18px rgba(0, 0, 0, 0.45); --shadow-accent: 0 10px 30px color-mix(in srgb, var(--gold-400) 22%, transparent); --scrollbar-thumb: var(--ink-400); --scrollbar-track: transparent; --backdrop: color-mix(in srgb, #000000 64%, transparent); --grad-brand: linear-gradient(135deg, var(--gold-500), var(--gold-300)); --grad-surface: linear-gradient(180deg, var(--ink-100), var(--ink-50)); --glow-accent: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--gold-400) 14%, transparent), transparent 70%); --c-1: var(--gold-400); --c-2: var(--emerald-400); --c-3: var(--azure-400); --c-4: var(--amber-400); --c-5: #B79BE8; --c-grid: color-mix(in srgb, var(--ink-400) 50%, transparent); --c-axis: var(--text-muted); }