/* ========================================================================== SACRED EDITORIAL — Design Tokens Islamic PWA Design System Aesthetic: The typographic reverence of a master calligrapher meets the geometric precision of Islamic zellige. Dimly-lit mosque at fajr, warm amber lantern light through mashrabiya screens. Color model: oklch() for perceptual uniformity Sizing: fluid clamp() for seamless responsiveness ========================================================================== */ /* -------------------------------------------------------------------------- 1. COLOR TOKENS -------------------------------------------------------------------------- Palette rooted in warm umber, aged parchment, and amber lantern light. Every color carries warmth — no cold blues, no sterile whites. -------------------------------------------------------------------------- */ :root { /* --- Backgrounds -------------------------------------------------------- */ --bg-deep: oklch(11% 0.015 55); /* warm dark, like ink on vellum */ --bg-surface: oklch(15% 0.018 55); /* card surfaces, warm umber hint */ --bg-elevated: oklch(19% 0.020 50); /* modals, sheets, elevated panels */ --bg-recessed: oklch(8% 0.012 55); /* sunken areas, wells, insets */ --bg-glass: oklch(12% 0.018 55 / 0.7);/* glassmorphism panels */ --bg-glass-heavy: oklch(10% 0.015 55 / 0.85);/* heavier glass for readability */ --bg-overlay: oklch(5% 0.01 55 / 0.6); /* scrim behind modals */ /* --- Foreground / Text -------------------------------------------------- */ --fg-primary: oklch(92% 0.015 75); /* warm cream — main body text */ --fg-secondary: oklch(75% 0.018 68); /* subheadings, captions */ --fg-muted: oklch(60% 0.020 60); /* secondary text, descriptions */ --fg-subtle: oklch(40% 0.015 55); /* tertiary, placeholders, timestamps */ --fg-disabled: oklch(30% 0.010 55); /* disabled states */ --fg-inverse: oklch(10% 0.015 55); /* text on light backgrounds */ /* --- Accent: Amber (Lantern Light) -------------------------------------- */ --accent-amber: oklch(75% 0.18 70); /* primary accent — call-to-action */ --accent-amber-glow: oklch(80% 0.22 65); /* hover / focus ring */ --accent-amber-subtle: oklch(20% 0.06 65); /* subtle tinted backgrounds */ --accent-amber-muted: oklch(45% 0.12 68); /* pressed / active state */ --accent-amber-on: oklch(12% 0.02 55); /* text on amber backgrounds */ /* --- Sacred Gold (Quran, Ayah markers, Calligraphy) --------------------- */ --sacred-gold: oklch(82% 0.15 85); /* Quran highlights, bismillah */ --sacred-gold-dim: oklch(55% 0.10 85); /* secondary sacred references */ --sacred-gold-subtle: oklch(18% 0.04 85); /* background tint for Quran cards */ /* --- Geometry & Pattern ------------------------------------------------- */ --geometry-line: oklch(28% 0.03 55); /* geometric pattern strokes */ --geometry-fill: oklch(17% 0.02 55); /* geometric pattern fills */ --geometry-glow: oklch(30% 0.06 65); /* subtle pattern glow on hover */ /* --- Semantic Colors ---------------------------------------------------- */ --success: oklch(65% 0.18 155); /* prayer completed, streak active */ --success-subtle: oklch(18% 0.06 155); /* success background tint */ --warning: oklch(70% 0.16 85); /* approaching prayer time */ --warning-subtle: oklch(20% 0.05 85); /* warning background tint */ --error: oklch(55% 0.22 25); /* missed prayer, validation error */ --error-subtle: oklch(18% 0.07 25); /* error background tint */ --info: oklch(60% 0.12 240); /* informational */ --info-subtle: oklch(16% 0.04 240); /* info background tint */ /* --- Borders ------------------------------------------------------------ */ --border: oklch(22% 0.015 55); /* subtle default border */ --border-strong: oklch(30% 0.02 55); /* emphasis borders, dividers */ --border-focus: oklch(75% 0.18 70); /* focus ring (matches accent-amber) */ --border-glass: oklch(22% 0.02 55 / 0.4); /* glassmorphism border */ /* -------------------------------------------------------------------------- 2. TYPOGRAPHY TOKENS -------------------------------------------------------------------------- Fluid type scale using clamp(). No fixed breakpoints. Arabic text is ~15-20% larger than Latin at same "size" for readability. -------------------------------------------------------------------------- */ /* --- Font Families ------------------------------------------------------ */ --font-quran: 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif; --font-display: 'Aref Ruqaa', 'Amiri', 'Traditional Arabic', serif; --font-body: 'Noto Kufi Arabic', 'Noto Sans Arabic', 'Tahoma', sans-serif; --font-latin: 'Cormorant Garamond', 'Garamond', 'Georgia', serif; --font-ui: 'Inter', 'SF Pro Text', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Fira Code', monospace; /* --- Fluid Type Scale (Latin baseline) ---------------------------------- */ /* min @ 320px → max @ 1440px */ --text-2xs: clamp(0.625rem, 0.58rem + 0.18vw, 0.6875rem); /* 10–11px */ --text-xs: clamp(0.6875rem, 0.64rem + 0.22vw, 0.75rem); /* 11–12px */ --text-sm: clamp(0.75rem, 0.70rem + 0.27vw, 0.8125rem); /* 12–13px */ --text-base: clamp(0.875rem, 0.82rem + 0.27vw, 1rem); /* 14–16px */ --text-md: clamp(1rem, 0.93rem + 0.36vw, 1.125rem); /* 16–18px */ --text-lg: clamp(1.125rem, 1.03rem + 0.45vw, 1.3125rem); /* 18–21px */ --text-xl: clamp(1.25rem, 1.12rem + 0.63vw, 1.5rem); /* 20–24px */ --text-2xl: clamp(1.5rem, 1.30rem + 0.89vw, 1.875rem); /* 24–30px */ --text-3xl: clamp(1.875rem, 1.59rem + 1.25vw, 2.375rem); /* 30–38px */ --text-4xl: clamp(2.25rem, 1.86rem + 1.70vw, 3rem); /* 36–48px */ --text-5xl: clamp(2.75rem, 2.20rem + 2.41vw, 3.75rem); /* 44–60px */ --text-6xl: clamp(3.375rem, 2.59rem + 3.39vw, 4.75rem); /* 54–76px */ --text-hero: clamp(4rem, 2.86rem + 5.00vw, 6rem); /* 64–96px */ /* --- Arabic-Specific Sizes (scaled ~1.15× Latin) ----------------------- */ --text-ar-xs: clamp(0.8125rem, 0.76rem + 0.27vw, 0.875rem); /* ~13–14px */ --text-ar-sm: clamp(0.875rem, 0.82rem + 0.27vw, 1rem); /* ~14–16px */ --text-ar-base: clamp(1rem, 0.93rem + 0.36vw, 1.125rem); /* ~16–18px */ --text-ar-body: clamp(1.125rem, 1.03rem + 0.45vw, 1.3125rem); /* ~18–21px */ --text-ar-lg: clamp(1.3125rem, 1.18rem + 0.58vw, 1.5625rem); /* ~21–25px */ --text-ar-display: clamp(1.75rem, 1.48rem + 1.16vw, 2.25rem); /* ~28–36px */ --text-ar-hero: clamp(2.5rem, 2.05rem + 1.96vw, 3.25rem); /* ~40–52px */ /* --- Quran Reading Sizes ------------------------------------------------ */ --text-quran-sm: clamp(1.125rem, 1.03rem + 0.45vw, 1.3125rem); /* compact */ --text-quran-base: clamp(1.375rem, 1.23rem + 0.63vw, 1.625rem); /* default */ --text-quran-lg: clamp(1.75rem, 1.55rem + 0.89vw, 2.125rem); /* comfort */ --text-quran-xl: clamp(2.25rem, 1.96rem + 1.25vw, 2.75rem); /* large */ /* --- Line Heights ------------------------------------------------------- */ --leading-none: 1; --leading-tight: 1.2; --leading-heading: 1.3; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-ar-heading: 1.3; /* Arabic headings — compact */ --leading-ar-body: 1.9; /* Arabic body — generous for diacritics */ --leading-ar-quran: 2.2; /* Quran text — maximum breathability */ /* --- Letter Spacing ----------------------------------------------------- */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --tracking-ar: 0; /* NEVER add tracking to Arabic script */ /* --- Font Weights ------------------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* -------------------------------------------------------------------------- 3. SPACING TOKENS -------------------------------------------------------------------------- Fluid spacing scale. Each step ≈ 1.5× the previous. min @ 320px → max @ 1440px -------------------------------------------------------------------------- */ --space-px: 1px; --space-0: 0; --space-0-5: clamp(0.0625rem, 0.05rem + 0.04vw, 0.125rem); /* 1– 2px */ --space-1: clamp(0.125rem, 0.11rem + 0.09vw, 0.25rem); /* 2– 4px */ --space-1-5: clamp(0.1875rem, 0.15rem + 0.13vw, 0.375rem); /* 3– 6px */ --space-2: clamp(0.25rem, 0.20rem + 0.18vw, 0.5rem); /* 4– 8px */ --space-3: clamp(0.375rem, 0.29rem + 0.27vw, 0.75rem); /* 6–12px */ --space-4: clamp(0.5rem, 0.39rem + 0.36vw, 1rem); /* 8–16px */ --space-5: clamp(0.625rem, 0.49rem + 0.45vw, 1.25rem); /* 10–20px */ --space-6: clamp(0.75rem, 0.59rem + 0.54vw, 1.5rem); /* 12–24px */ --space-8: clamp(1rem, 0.79rem + 0.71vw, 2rem); /* 16–32px */ --space-10: clamp(1.25rem, 0.98rem + 0.89vw, 2.5rem); /* 20–40px */ --space-12: clamp(1.5rem, 1.18rem + 1.07vw, 3rem); /* 24–48px */ --space-14: clamp(1.75rem, 1.38rem + 1.25vw, 3.5rem); /* 28–56px */ --space-16: clamp(2rem, 1.57rem + 1.43vw, 4rem); /* 32–64px */ --space-20: clamp(2.5rem, 1.96rem + 1.79vw, 5rem); /* 40–80px */ --space-24: clamp(3rem, 2.36rem + 2.14vw, 6rem); /* 48–96px */ --space-28: clamp(3.5rem, 2.75rem + 2.50vw, 7rem); /* 56–112px */ --space-32: clamp(4rem, 3.14rem + 2.86vw, 8rem); /* 64–128px */ /* --- Semantic Spacing --------------------------------------------------- */ --space-section: var(--space-24); /* between major page sections */ --space-card-pad: var(--space-6); /* inner card padding */ --space-card-gap: var(--space-4); /* between cards in a grid */ --space-stack: var(--space-3); /* between stacked elements */ --space-inline: var(--space-2); /* between inline elements */ --space-page-x: var(--space-6); /* horizontal page gutter */ --space-page-y: var(--space-8); /* vertical page padding */ /* -------------------------------------------------------------------------- 4. MOTION TOKENS -------------------------------------------------------------------------- Crafted easings for buttery motion. iOS spring curves for physicality. -------------------------------------------------------------------------- */ /* --- Easing Functions --------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* fast exit, soft land */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* slow start, snap end */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot spring */ --ease-bounce: cubic-bezier(0.34, 1.80, 0.64, 1); /* bouncy spring */ --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* gentle default */ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); /* exponential decel */ --ease-out-back: cubic-bezier(0.34, 1.40, 0.64, 1); /* slight overshoot */ --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* sharp and decisive */ /* --- iOS / Native-Feel Springs ------------------------------------------ */ --ios-spring: linear( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85%, 1 ); --ios-spring-fast: linear( 0, 0.009, 0.038 2.1%, 0.142 4.6%, 0.55 12.3%, 0.77 17.1%, 0.875 20.4%, 0.957 24.4%, 0.988 27.2%, 1.01 30.5%, 1.02 34.8%, 1.016 46.2%, 1.004 65%, 1 ); --ios-spring-slow: linear( 0, 0.004, 0.016 3.4%, 0.065 7.2%, 0.352 22.2%, 0.586 33.5%, 0.742 41%, 0.858 48.8%, 0.929 55.7%, 0.968 63%, 0.988 70.8%, 0.998 80.6%, 1 ); /* --- Durations ---------------------------------------------------------- */ --dur-instant: 80ms; /* micro-feedback (button press) */ --dur-fast: 120ms; /* icon swaps, checkmarks */ --dur-normal: 200ms; /* default transitions */ --dur-moderate: 300ms; /* card reveals, accordions */ --dur-slow: 450ms; /* page transitions, modals */ --dur-slower: 600ms; /* complex sequences */ --dur-dramatic: 750ms; /* splash reveals, onboarding */ --dur-cinematic: 900ms; /* hero animations, first-load */ --dur-epic: 1200ms; /* full-screen transitions */ /* --- Stagger Delays ----------------------------------------------------- */ --stagger-fast: 30ms; --stagger-normal: 60ms; --stagger-slow: 100ms; /* -------------------------------------------------------------------------- 5. SHADOW TOKENS -------------------------------------------------------------------------- Warm shadows — never pure black. Always tinted toward the umber palette. -------------------------------------------------------------------------- */ --shadow-color: 55 15% 3%; /* warm umber shadow base (hsl components) */ --shadow-xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.3); --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / 0.3), 0 1px 2px -1px hsl(var(--shadow-color) / 0.2); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.3), 0 2px 4px -2px hsl(var(--shadow-color) / 0.2); --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.3), 0 4px 6px -4px hsl(var(--shadow-color) / 0.2); --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.35), 0 8px 10px -6px hsl(var(--shadow-color) / 0.2); --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / 0.5); /* --- Inner Shadows ------------------------------------------------------ */ --shadow-inner: inset 0 2px 4px 0 hsl(var(--shadow-color) / 0.3); --shadow-inner-lg: inset 0 4px 8px 0 hsl(var(--shadow-color) / 0.4); /* --- Glows (Lantern Light) ---------------------------------------------- */ --glow-amber: 0 0 20px oklch(75% 0.18 70 / 0.25), 0 0 60px oklch(75% 0.18 70 / 0.10); --glow-amber-sm: 0 0 10px oklch(75% 0.18 70 / 0.20); --glow-amber-lg: 0 0 30px oklch(75% 0.18 70 / 0.30), 0 0 80px oklch(75% 0.18 70 / 0.12), 0 0 120px oklch(75% 0.18 70 / 0.05); --glow-gold: 0 0 20px oklch(82% 0.15 85 / 0.20), 0 0 50px oklch(82% 0.15 85 / 0.08); --glow-soft: 0 0 40px oklch(50% 0.04 55 / 0.15); /* -------------------------------------------------------------------------- 6. BORDER RADIUS TOKENS -------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 9999px; /* --- Semantic Radii ----------------------------------------------------- */ --radius-card: var(--radius-lg); --radius-button: var(--radius-md); --radius-input: var(--radius-sm); --radius-badge: var(--radius-full); --radius-modal: var(--radius-xl); /* -------------------------------------------------------------------------- 7. Z-INDEX TOKENS -------------------------------------------------------------------------- Explicit layering system. No magic numbers in components. -------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-nav: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-scroll-top: 800; --z-tooltip: 800; --z-modal-overlay: 990; --z-max: 999; /* -------------------------------------------------------------------------- 8. LAYOUT TOKENS -------------------------------------------------------------------------- */ --content-max-w: min(100% - var(--space-page-x) * 2, 72rem); --content-narrow-w: min(100% - var(--space-page-x) * 2, 40rem); --content-wide-w: min(100% - var(--space-page-x) * 2, 90rem); /* --- Safe Areas (notch, home indicator) --------------------------------- */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* --- Bottom Navigation Bar Height --------------------------------------- */ --nav-height: clamp(3.5rem, 3.2rem + 0.89vw, 4.5rem); /* -------------------------------------------------------------------------- 9. BLUR & FILTER TOKENS -------------------------------------------------------------------------- */ --blur-sm: 4px; --blur-md: 12px; --blur-lg: 24px; --blur-xl: 40px; --blur-glass: 20px; /* standard glassmorphism blur */ --saturate-glass: 1.2; /* subtle saturation boost for glass */ --grain-opacity: 0.03; /* film grain overlay intensity */ /* -------------------------------------------------------------------------- 10. GRADIENT TOKENS -------------------------------------------------------------------------- */ --gradient-surface: linear-gradient( 180deg, var(--bg-surface) 0%, var(--bg-deep) 100% ); --gradient-elevated: linear-gradient( 180deg, var(--bg-elevated) 0%, var(--bg-surface) 100% ); --gradient-amber: linear-gradient( 135deg, oklch(75% 0.18 70) 0%, oklch(70% 0.20 55) 100% ); --gradient-gold: linear-gradient( 135deg, oklch(82% 0.15 85) 0%, oklch(72% 0.17 70) 100% ); --gradient-fade-down: linear-gradient( 180deg, transparent 0%, var(--bg-deep) 100% ); --gradient-fade-up: linear-gradient( 0deg, transparent 0%, var(--bg-deep) 100% ); --gradient-mashrabiya: radial-gradient( ellipse at 50% 0%, oklch(20% 0.04 65 / 0.5) 0%, transparent 70% ); } /* ========================================================================== ACCESSIBILITY: Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-normal: 0ms; --dur-moderate: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; --dur-dramatic: 0ms; --dur-cinematic: 0ms; --dur-epic: 0ms; --stagger-fast: 0ms; --stagger-normal: 0ms; --stagger-slow: 0ms; --ease-spring: var(--ease-smooth); --ease-bounce: var(--ease-smooth); --ease-out-back: var(--ease-smooth); --ios-spring: ease; --ios-spring-fast: ease; --ios-spring-slow: ease; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== ACCESSIBILITY: High Contrast ========================================================================== */ @media (prefers-contrast: more) { :root { /* Increase foreground contrast */ --fg-primary: oklch(98% 0.005 75); --fg-secondary: oklch(88% 0.010 68); --fg-muted: oklch(75% 0.015 60); --fg-subtle: oklch(60% 0.010 55); /* Strengthen borders */ --border: oklch(35% 0.02 55); --border-strong: oklch(50% 0.03 55); /* Boost accents */ --accent-amber: oklch(85% 0.22 70); --accent-amber-glow: oklch(90% 0.25 65); --sacred-gold: oklch(90% 0.18 85); /* Semantic color contrast boost */ --success: oklch(75% 0.22 155); --error: oklch(65% 0.25 25); --warning: oklch(80% 0.20 85); /* Deepen backgrounds for more separation */ --bg-deep: oklch(5% 0.01 55); --bg-surface: oklch(10% 0.015 55); --bg-elevated: oklch(18% 0.02 50); /* Stronger shadows for depth perception */ --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / 0.5), 0 1px 2px -1px hsl(var(--shadow-color) / 0.4); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.5), 0 2px 4px -2px hsl(var(--shadow-color) / 0.4); /* Disable glass effects for clarity */ --bg-glass: var(--bg-surface); --bg-glass-heavy: var(--bg-surface); --blur-glass: 0px; } } /* ========================================================================== ACCESSIBILITY: Forced Colors (Windows High Contrast) ========================================================================== */ @media (forced-colors: active) { :root { --border: CanvasText; --border-strong: CanvasText; --border-focus: Highlight; --fg-primary: CanvasText; --fg-muted: GrayText; --accent-amber: LinkText; --sacred-gold: Highlight; --bg-deep: Canvas; --bg-surface: Canvas; --bg-elevated: Canvas; } } /* ========================================================================== DARK / LIGHT SCHEME DECLARATION ========================================================================== */ :root { color-scheme: light dark; } /* ========================================================================== THEME: LIGHT — Warm Parchment / Daylight Mosque Applied via data-theme="light" or prefers-color-scheme: light (auto) ========================================================================== */ [data-theme="light"] { color-scheme: light; /* --- Backgrounds --- */ --bg-deep: oklch(96% 0.010 75); --bg-surface: oklch(100% 0 0); --bg-elevated: oklch(98% 0.005 75); --bg-recessed: oklch(93% 0.012 75); --bg-glass: oklch(100% 0 0 / 0.7); --bg-glass-heavy: oklch(98% 0.005 75 / 0.85); --bg-overlay: oklch(20% 0.02 55 / 0.4); /* --- Foreground / Text --- */ --fg-primary: oklch(15% 0.015 55); --fg-secondary: oklch(30% 0.020 60); --fg-muted: oklch(45% 0.018 60); --fg-subtle: oklch(60% 0.015 60); --fg-disabled: oklch(72% 0.010 60); --fg-inverse: oklch(95% 0.010 75); /* --- Accent: Amber (deeper for light bg contrast) --- */ --accent-amber: oklch(55% 0.18 55); --accent-amber-glow: oklch(60% 0.22 55); --accent-amber-subtle: oklch(92% 0.04 70); --accent-amber-muted: oklch(45% 0.15 55); --accent-amber-on: oklch(100% 0 0); /* --- Sacred Gold --- */ --sacred-gold: oklch(55% 0.15 75); --sacred-gold-dim: oklch(45% 0.12 75); --sacred-gold-subtle: oklch(94% 0.03 80); /* --- Geometry --- */ --geometry-line: oklch(85% 0.015 70); --geometry-fill: oklch(95% 0.008 70); --geometry-glow: oklch(80% 0.03 65); /* --- Semantic --- */ --success: oklch(45% 0.18 155); --success-subtle: oklch(94% 0.04 155); --warning: oklch(55% 0.16 75); --warning-subtle: oklch(95% 0.04 75); --error: oklch(48% 0.22 25); --error-subtle: oklch(95% 0.04 25); --info: oklch(50% 0.14 240); --info-subtle: oklch(95% 0.03 240); /* --- Borders --- */ --border: oklch(88% 0.010 70); --border-strong: oklch(78% 0.015 65); --border-focus: oklch(55% 0.18 55); --border-glass: oklch(85% 0.010 70 / 0.5); /* --- Shadows (cooler, lighter) --- */ --shadow-color: 55 10% 40%; --shadow-xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.06); --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / 0.08), 0 1px 2px -1px hsl(var(--shadow-color) / 0.06); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.08), 0 2px 4px -2px hsl(var(--shadow-color) / 0.06); --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.08), 0 4px 6px -4px hsl(var(--shadow-color) / 0.05); --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.10), 0 8px 10px -6px hsl(var(--shadow-color) / 0.06); /* --- Glows (muted for light) --- */ --glow-amber: 0 0 15px oklch(55% 0.18 55 / 0.12); --glow-amber-sm: 0 0 8px oklch(55% 0.18 55 / 0.10); --glow-amber-lg: 0 0 20px oklch(55% 0.18 55 / 0.15); --glow-gold: 0 0 15px oklch(55% 0.15 75 / 0.10); --glow-soft: 0 0 30px oklch(50% 0.04 55 / 0.08); /* --- Gradients --- */ --gradient-surface: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-deep) 100%); --gradient-elevated: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%); --gradient-fade-down: linear-gradient(180deg, transparent 0%, var(--bg-deep) 100%); --gradient-fade-up: linear-gradient(0deg, transparent 0%, var(--bg-deep) 100%); --gradient-mashrabiya: radial-gradient(ellipse at 50% 0%, oklch(85% 0.03 70 / 0.3) 0%, transparent 70%); } /* ========================================================================== THEME: SEPIA — Warm Parchment / Aged Manuscript ========================================================================== */ [data-theme="sepia"] { --bg-deep: oklch(14% 0.025 55); --bg-surface: oklch(18% 0.030 52); --bg-elevated: oklch(22% 0.032 50); --bg-recessed: oklch(10% 0.020 55); --bg-glass: oklch(18% 0.025 52 / 0.7); --bg-glass-heavy: oklch(14% 0.025 55 / 0.85); --fg-primary: oklch(90% 0.025 68); --fg-secondary: oklch(72% 0.028 62); --fg-muted: oklch(58% 0.025 58); --accent-amber: oklch(72% 0.16 65); --accent-amber-glow: oklch(78% 0.20 60); --accent-amber-subtle: oklch(22% 0.07 60); --sacred-gold: oklch(78% 0.14 78); --sacred-gold-dim: oklch(52% 0.10 78); --border: oklch(22% 0.020 52); --border-strong: oklch(30% 0.025 52); --gradient-mashrabiya: radial-gradient(ellipse at 50% 0%, oklch(25% 0.05 58 / 0.5) 0%, transparent 70%); } /* ========================================================================== THEME: DARK GREEN — Emerald Mosque ========================================================================== */ [data-theme="dark-green"] { --bg-deep: oklch(8% 0.020 155); --bg-surface: oklch(12% 0.025 155); --bg-elevated: oklch(16% 0.028 150); --bg-recessed: oklch(6% 0.015 155); --bg-glass: oklch(12% 0.020 155 / 0.7); --bg-glass-heavy: oklch(10% 0.020 155 / 0.85); --fg-primary: oklch(92% 0.015 150); --fg-secondary: oklch(75% 0.020 150); --fg-muted: oklch(58% 0.020 148); --accent-amber: oklch(70% 0.18 155); --accent-amber-glow: oklch(75% 0.22 155); --accent-amber-subtle: oklch(18% 0.06 155); --accent-amber-muted: oklch(42% 0.14 155); --accent-amber-on: oklch(10% 0.02 155); --sacred-gold: oklch(80% 0.14 155); --sacred-gold-dim: oklch(52% 0.10 155); --sacred-gold-subtle: oklch(16% 0.04 155); --geometry-line: oklch(22% 0.04 155); --geometry-fill: oklch(14% 0.03 155); --success: oklch(65% 0.18 155); --border: oklch(18% 0.020 155); --border-strong: oklch(25% 0.025 150); --border-focus: oklch(70% 0.18 155); --glow-amber: 0 0 20px oklch(70% 0.18 155 / 0.25), 0 0 60px oklch(70% 0.18 155 / 0.10); --glow-amber-sm: 0 0 10px oklch(70% 0.18 155 / 0.20); --glow-gold: 0 0 20px oklch(80% 0.14 155 / 0.20); --gradient-amber: linear-gradient(135deg, oklch(70% 0.18 155) 0%, oklch(60% 0.20 145) 100%); --gradient-gold: linear-gradient(135deg, oklch(80% 0.14 155) 0%, oklch(68% 0.16 150) 100%); --gradient-mashrabiya: radial-gradient(ellipse at 50% 0%, oklch(20% 0.05 155 / 0.5) 0%, transparent 70%); } /* ========================================================================== THEME: AMOLED — True Black (Battery Saver) ========================================================================== */ [data-theme="amoled"] { --bg-deep: oklch(0% 0 0); --bg-surface: oklch(5% 0.008 55); --bg-elevated: oklch(8% 0.010 55); --bg-recessed: oklch(0% 0 0); --bg-glass: oklch(3% 0.005 55 / 0.8); --bg-glass-heavy: oklch(2% 0.005 55 / 0.9); --bg-overlay: oklch(0% 0 0 / 0.7); --fg-primary: oklch(90% 0.012 75); --fg-secondary: oklch(70% 0.015 68); --fg-muted: oklch(52% 0.015 60); --fg-subtle: oklch(32% 0.010 55); --accent-amber: oklch(72% 0.16 70); --accent-amber-glow: oklch(78% 0.20 65); --accent-amber-subtle: oklch(10% 0.04 65); --sacred-gold: oklch(78% 0.13 85); --sacred-gold-dim: oklch(48% 0.08 85); --sacred-gold-subtle: oklch(8% 0.03 85); --geometry-line: oklch(12% 0.02 55); --geometry-fill: oklch(4% 0.01 55); --border: oklch(10% 0.008 55); --border-strong: oklch(16% 0.012 55); --border-glass: oklch(12% 0.01 55 / 0.4); --glow-amber: 0 0 15px oklch(72% 0.16 70 / 0.20), 0 0 40px oklch(72% 0.16 70 / 0.08); --glow-amber-sm: 0 0 8px oklch(72% 0.16 70 / 0.15); --glow-gold: 0 0 15px oklch(78% 0.13 85 / 0.15); --glow-soft: 0 0 25px oklch(40% 0.03 55 / 0.10); --gradient-mashrabiya: radial-gradient(ellipse at 50% 0%, oklch(10% 0.03 65 / 0.4) 0%, transparent 70%); } /* ========================================================================== AUTO THEME: Prefers-color-scheme light (when no data-theme is set) ========================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg-deep: oklch(96% 0.010 75); --bg-surface: oklch(100% 0 0); --bg-elevated: oklch(98% 0.005 75); --bg-recessed: oklch(93% 0.012 75); --bg-glass: oklch(100% 0 0 / 0.7); --bg-glass-heavy: oklch(98% 0.005 75 / 0.85); --bg-overlay: oklch(20% 0.02 55 / 0.4); --fg-primary: oklch(15% 0.015 55); --fg-secondary: oklch(30% 0.020 60); --fg-muted: oklch(45% 0.018 60); --fg-subtle: oklch(60% 0.015 60); --fg-disabled: oklch(72% 0.010 60); --fg-inverse: oklch(95% 0.010 75); --accent-amber: oklch(55% 0.18 55); --accent-amber-glow: oklch(60% 0.22 55); --accent-amber-subtle: oklch(92% 0.04 70); --accent-amber-muted: oklch(45% 0.15 55); --accent-amber-on: oklch(100% 0 0); --sacred-gold: oklch(55% 0.15 75); --sacred-gold-dim: oklch(45% 0.12 75); --sacred-gold-subtle: oklch(94% 0.03 80); --geometry-line: oklch(85% 0.015 70); --geometry-fill: oklch(95% 0.008 70); --geometry-glow: oklch(80% 0.03 65); --success: oklch(45% 0.18 155); --success-subtle: oklch(94% 0.04 155); --warning: oklch(55% 0.16 75); --warning-subtle: oklch(95% 0.04 75); --error: oklch(48% 0.22 25); --error-subtle: oklch(95% 0.04 25); --info: oklch(50% 0.14 240); --info-subtle: oklch(95% 0.03 240); --border: oklch(88% 0.010 70); --border-strong: oklch(78% 0.015 65); --border-focus: oklch(55% 0.18 55); --border-glass: oklch(85% 0.010 70 / 0.5); --shadow-color: 55 10% 40%; --shadow-xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.06); --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / 0.08), 0 1px 2px -1px hsl(var(--shadow-color) / 0.06); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.08), 0 2px 4px -2px hsl(var(--shadow-color) / 0.06); --glow-amber: 0 0 15px oklch(55% 0.18 55 / 0.12); --glow-amber-sm: 0 0 8px oklch(55% 0.18 55 / 0.10); --glow-gold: 0 0 15px oklch(55% 0.15 75 / 0.10); --glow-soft: 0 0 30px oklch(50% 0.04 55 / 0.08); --gradient-surface: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-deep) 100%); --gradient-elevated: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%); --gradient-fade-down: linear-gradient(180deg, transparent 0%, var(--bg-deep) 100%); --gradient-fade-up: linear-gradient(0deg, transparent 0%, var(--bg-deep) 100%); --gradient-mashrabiya: radial-gradient(ellipse at 50% 0%, oklch(85% 0.03 70 / 0.3) 0%, transparent 70%); } }