/* ============================================================ Design tokens. Dark is the default. Light is opted into with data-theme="light" on ; the inline script in each page's sets that attribute before first paint, from localStorage or the OS preference, so there is no flash of the wrong theme. Components must never hardcode a colour — every value that differs between the two themes lives here. ============================================================ */ :root { /* brand — the purple ramp is shared by both themes */ --purple-900: #1c0f2b; --purple-800: #2e1849; --purple-700: #592c82; /* nexwift.com primary */ --purple-600: #6c3999; --purple-500: #8548b8; --purple-300: #b79bd6; --purple-glow: rgba(89, 44, 130, 0.45); /* surface */ --bg: #08080b; --bg-elevated: #111116; --bg-elevated-2: #18181f; --border: #26262e; --border-soft: #1c1c22; /* text */ --text: #f5f5f7; --text-muted: #9a9aa6; /* was #6c6c78, which only reached 3.6:1 on the elevated surface — small labels use this, so it has to clear 4.5:1 like everything else */ --text-faint: #85858f; /* themed accents */ --nav-bg: rgba(8, 8, 11, 0.78); --grid-line: rgba(255, 255, 255, 0.045); --aurora-opacity: 0.55; --panel-tint: rgba(89, 44, 130, 0.16); --panel-tint-strong: rgba(89, 44, 130, 0.28); --panel-next-tint: rgba(89, 44, 130, 0.22); --grad-from: #ffffff; --grad-to: var(--purple-300); --accent-grad-from: var(--purple-300); --accent-grad-to: var(--purple-500); --accent-soft-bg: rgba(155, 95, 208, 0.16); --accent-soft-fg: var(--purple-300); --accent-soft-border: var(--purple-800); --link-accent: var(--purple-300); --chip-bg: var(--purple-800); --chip-fg: var(--purple-300); /* type */ --font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-arabic: "Tajawal", "Inter", -apple-system, "Segoe UI", sans-serif; /* scale */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --container: 1180px; --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35); --shadow-glow: 0 0 120px var(--purple-glow); color-scheme: dark; } :root[data-theme="light"] { /* surface — violet-tinted neutrals, not flat grey */ --bg: #ffffff; --bg-elevated: #f7f5fa; --bg-elevated-2: #efebf5; --border: #e1dcea; --border-soft: #eeeaf4; /* text — near-black with a violet cast, for contrast against white */ --text: #16101f; --text-muted: #574f66; /* dark enough to clear 4.5:1 against the elevated surface, not just white — it is used for small labels, which is exactly where AA matters most */ --text-faint: #625b73; --nav-bg: rgba(255, 255, 255, 0.82); --grid-line: rgba(22, 16, 31, 0.055); --aurora-opacity: 0.22; --panel-tint: rgba(89, 44, 130, 0.06); --panel-tint-strong: rgba(89, 44, 130, 0.09); --panel-next-tint: rgba(89, 44, 130, 0.07); --grad-from: #2e1849; --grad-to: #8548b8; --accent-grad-from: var(--purple-700); --accent-grad-to: #9a5ecb; --accent-soft-bg: #f1e8fa; --accent-soft-fg: var(--purple-700); --accent-soft-border: #dcc9ef; --link-accent: var(--purple-700); --chip-bg: #ede2f8; --chip-fg: var(--purple-700); --purple-glow: rgba(133, 72, 184, 0.22); --shadow-md: 0 8px 30px rgba(46, 24, 73, 0.10); color-scheme: light; }