/* ============================================================ CSS Variables — Design Token System v2 (Polish) نور Islamic App ============================================================ */ /* ── Dark Theme (Default) ────────────────────────────────── */ :root, [data-theme="dark"] { /* ── Brand Palette ── */ --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46; --gold-400: #fbbf24; --gold-500: #f59e0b; --gold-600: #d97706; --gold-700: #b45309; /* ── Semantic Roles ── */ --color-primary: #10b981; --color-primary-light: #34d399; --color-primary-dark: #059669; --color-primary-glow: rgba(16, 185, 129, 0.22); --color-primary-subtle: rgba(16, 185, 129, 0.09); --color-primary-border: rgba(16, 185, 129, 0.18); --color-accent: #f59e0b; --color-accent-light: #fbbf24; --color-accent-dark: #d97706; --color-accent-glow: rgba(245, 158, 11, 0.22); --color-accent-subtle: rgba(245, 158, 11, 0.09); --color-accent-border: rgba(245, 158, 11, 0.18); /* ── Background Layers ── */ --bg-base: #07090F; --bg-deep: #0A0D17; --bg-surface: #0D1120; --bg-card: rgba(255,255,255,0.038); --bg-card-hover: rgba(255,255,255,0.055); --bg-elevated: #131929; --bg-overlay: #18213A; /* ── Card System ── */ --card-bg: rgba(19, 25, 41, 0.85); --card-bg-light: rgba(25, 33, 55, 0.70); --card-border: rgba(255, 255, 255, 0.065); --card-border-em: rgba(16, 185, 129, 0.16); --card-border-gold: rgba(245, 158, 11, 0.16); --card-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.04); --card-shadow-hover: 0 2px 6px rgba(0,0,0,0.50), 0 8px 20px rgba(0,0,0,0.40), 0 16px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); --card-shadow-em: 0 1px 3px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.30), 0 0 0 1px rgba(16,185,129,0.12), inset 0 1px 0 rgba(255,255,255,0.04); /* ── Glass Effect ── */ --glass-bg: rgba(13, 17, 32, 0.75); --glass-blur: 18px; /* ── Text ── */ --text-primary: #EEF2FF; --text-secondary: #9BA8C4; --text-muted: #5B6882; --text-disabled: #3A4560; --text-inverse: #07090F; --text-emerald: #10b981; --text-gold: #f59e0b; /* ── Borders ── */ --border-subtle: rgba(255,255,255,0.05); --border-default: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 2px 6px rgba(0,0,0,0.45); --shadow-md: 0 4px 14px rgba(0,0,0,0.50); --shadow-lg: 0 8px 28px rgba(0,0,0,0.55); --shadow-xl: 0 16px 48px rgba(0,0,0,0.60); --shadow-emerald: 0 4px 20px rgba(16,185,129,0.28), 0 1px 4px rgba(16,185,129,0.15); --shadow-gold: 0 4px 20px rgba(245,158,11,0.28), 0 1px 4px rgba(245,158,11,0.15); /* ── Gradients ── */ --gradient-primary: linear-gradient(140deg, #065f46 0%, #059669 45%, #10b981 100%); --gradient-accent: linear-gradient(140deg, #b45309 0%, #d97706 50%, #f59e0b 100%); --gradient-card: linear-gradient(160deg, rgba(16,185,129,0.06) 0%, rgba(245,158,11,0.02) 100%); --gradient-hero: linear-gradient(165deg, #07091A 0%, #0D1530 50%, #07091A 100%); --gradient-mesh: radial-gradient(ellipse at 15% 40%, rgba(16,185,129,0.07) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(245,158,11,0.05) 0%, transparent 45%), radial-gradient(ellipse at 55% 85%, rgba(5,150,105,0.05) 0%, transparent 50%); /* ── Navigation ── */ --nav-height: 65px; --nav-bg: rgba(7, 9, 15, 0.94); --nav-border: rgba(255,255,255,0.06); --nav-active: var(--color-primary); --nav-inactive: #4A5775; /* ── Pattern ── */ --pattern-color: rgba(16, 185, 129, 0.035); } /* ── Light Theme ─────────────────────────────────────────── */ [data-theme="light"] { --color-primary: #059669; --color-primary-light: #10b981; --color-primary-dark: #047857; --color-primary-glow: rgba(5, 150, 105, 0.18); --color-primary-subtle: rgba(5, 150, 105, 0.08); --color-primary-border: rgba(5, 150, 105, 0.20); --color-accent: #d97706; --color-accent-light: #f59e0b; --color-accent-dark: #b45309; --color-accent-glow: rgba(217, 119, 6, 0.18); --color-accent-subtle: rgba(217, 119, 6, 0.08); --color-accent-border: rgba(217, 119, 6, 0.20); --bg-base: #F4F7F5; --bg-deep: #FFFFFF; --bg-surface: #EEF2EE; --bg-card: rgba(255,255,255,0.95); --bg-card-hover: rgba(255,255,255,1); --bg-elevated: #FFFFFF; --bg-overlay: #E8EEE9; --card-bg: rgba(255,255,255,0.90); --card-bg-light: rgba(248,252,249,0.85); --card-border: rgba(0,0,0,0.07); --card-border-em: rgba(5,150,105,0.18); --card-border-gold: rgba(217,119,6,0.18); --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.80); --card-shadow-hover: 0 2px 8px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,1); --card-shadow-em: 0 1px 3px rgba(0,0,0,0.07), 0 4px 14px rgba(0,0,0,0.05), 0 0 0 1px rgba(5,150,105,0.14), inset 0 1px 0 rgba(255,255,255,0.80); --glass-bg: rgba(255,255,255,0.85); --glass-blur: 18px; --text-primary: #0D1520; --text-secondary: #4A5568; --text-muted: #8A9BB2; --text-disabled: #C0CCDA; --text-inverse: #F4F7F5; --text-emerald: #059669; --text-gold: #d97706; --border-subtle: rgba(0,0,0,0.05); --border-default: rgba(0,0,0,0.09); --border-strong: rgba(0,0,0,0.15); --shadow-xs: 0 1px 2px rgba(0,0,0,0.06); --shadow-sm: 0 2px 6px rgba(0,0,0,0.08); --shadow-md: 0 4px 14px rgba(0,0,0,0.10); --shadow-lg: 0 8px 28px rgba(0,0,0,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.14); --shadow-emerald: 0 4px 20px rgba(5,150,105,0.22), 0 1px 4px rgba(5,150,105,0.12); --shadow-gold: 0 4px 20px rgba(217,119,6,0.22), 0 1px 4px rgba(217,119,6,0.12); --gradient-primary: linear-gradient(140deg, #065f46 0%, #059669 45%, #10b981 100%); --gradient-accent: linear-gradient(140deg, #92400e 0%, #b45309 50%, #d97706 100%); --gradient-card: linear-gradient(160deg, rgba(5,150,105,0.05) 0%, rgba(217,119,6,0.02) 100%); --gradient-hero: linear-gradient(165deg, #E8F4EE 0%, #F0FAF5 50%, #E8F4EE 100%); --gradient-mesh: radial-gradient(ellipse at 15% 40%, rgba(5,150,105,0.06) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(217,119,6,0.04) 0%, transparent 45%), radial-gradient(ellipse at 55% 85%, rgba(5,150,105,0.04) 0%, transparent 50%); --nav-height: 65px; --nav-bg: rgba(255,255,255,0.94); --nav-border: rgba(0,0,0,0.07); --nav-active: var(--color-primary); --nav-inactive: #9BAAB8; --pattern-color: rgba(5, 150, 105, 0.03); } /* ── Global Tokens (theme-independent) ───────────────────── */ :root { /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── Type Scale ── */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 42px; --text-5xl: 54px; /* ── Fonts ── */ --font-display: 'Cairo', system-ui, sans-serif; --font-body: 'Tajawal', 'Cairo', system-ui, sans-serif; --font-quran: 'Amiri', 'Cairo', serif; --font-mono: 'JetBrains Mono', monospace; /* ── Radius ── */ --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ── Transitions ── */ --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); --transition-fast: 120ms var(--ease-in-out); --transition-base: 220ms var(--ease-in-out); --transition-slow: 380ms var(--ease-in-out); --transition-spring: 480ms var(--ease-spring); --transition-page: 320ms var(--ease-out); /* ── Z-index ── */ --z-below: -1; --z-base: 0; --z-above: 10; --z-nav: 200; --z-modal: 300; --z-toast: 400; --z-splash: 999; /* ── Layout ── */ --max-width: 480px; --header-height: 56px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }