/* ============================================================ ParsinX — Themes Dark ("شب" / night) is the default, declared on :root in the other token files. This file adds the Light ("روز" / day) theme, activated by [data-theme="light"] on . Toggle with the ThemeToggle component (persists to localStorage). ============================================================ */ [data-theme="light"] { /* ---- Surfaces ---- */ --surface-app: #EEF1F7; --surface-sunken: #E3E8F1; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-overlay: rgba(255, 255, 255, 0.85); --surface-glass: rgba(255, 255, 255, 0.62); /* ---- Text ---- */ --text-primary: #0E1320; --text-secondary: #475067; --text-muted: #6C7689; --text-disabled: #AAB2C2; --text-inverse: #FFFFFF; --text-accent: var(--px-azure-deep); /* ---- Borders ---- */ --border-subtle: #E5E9F1; --border-default: #D4DAE5; --border-strong: #B9C1CF; --border-accent: color-mix(in srgb, var(--px-azure) 45%, transparent); /* ---- Glossy surface fills (white card, faint cool gradient) ---- */ --gloss-card: linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 100%); /* @kind other */ --gloss-raised: linear-gradient(180deg, #FFFFFF 0%, #EEF3FA 100%); /* @kind other */ --gloss-accent-sheen: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.12) 18%, rgba(255,255,255,0) 46%); /* @kind other */ /* ---- Inner specular / ring (light) ---- */ --inner-top-highlight: inset 0 1px 0 rgba(255,255,255,0.9); /* @kind shadow */ --inner-top-highlight-strong: inset 0 1px 0 rgba(255,255,255,1); /* @kind shadow */ --inner-ring: inset 0 0 0 1px rgba(20,32,64,0.06); /* @kind shadow */ /* ---- Recessed well + hover veil ---- */ --inset-well: inset 0 1px 2px rgba(23,37,84,0.10); --hover-veil: rgba(20,32,64,0.05); /* ---- Elevation shadows (soft cool blue-gray, low alpha) ---- */ --shadow-xs: 0 1px 2px rgba(23,37,84,0.06); --shadow-sm: 0 2px 6px rgba(23,37,84,0.08), 0 1px 2px rgba(23,37,84,0.05); --shadow-md: 0 8px 24px rgba(23,37,84,0.10), 0 2px 6px rgba(23,37,84,0.06); --shadow-lg: 0 18px 48px rgba(23,37,84,0.14), 0 6px 16px rgba(23,37,84,0.08); --shadow-xl: 0 32px 80px rgba(23,37,84,0.18), 0 12px 28px rgba(23,37,84,0.10); /* ---- Glass ---- */ --glass-bg: rgba(255,255,255,0.62); --glass-border: 1px solid rgba(20,32,64,0.08); /* @kind other */ --glass-shadow: 0 16px 40px rgba(23,37,84,0.12), inset 0 1px 0 rgba(255,255,255,0.9); } /* Explicit Dark ("شب" / night) selector. Dark is the :root default, but this lets a subtree force night mode even when the page root is in day mode — used by the admin slider preview's روز/شب toggle. Re-asserts the :root dark values for the tokens the banner reads (raw ink-scale refs, so no drift). */ [data-theme="dark"] { --surface-app: var(--px-ink-900); --text-primary: var(--px-ink-50); --text-secondary: var(--px-ink-200); --text-muted: var(--px-ink-300); } /* Smooth cross-fade when the theme flips */ [data-theme] body, [data-theme] .px-app-bg { transition: background-color var(--dur-slow) var(--ease-standard); }