/** * ============================================================================= * MUSE DESIGN TOKEN SYSTEM — W3C DTCG SPEC V2025.10 ALIGNED * QuranMarketation V2 Enterprise * * ARCHITECTURE: * Layer 1: Primitive Tokens (Scale foundations: OKLCH + sRGB fallbacks, 8px grid, Major Third scale, elevations, radii) * Layer 2: Semantic Tokens (Contextual mappings for Canvas, Surfaces, Text, Borders, Feedback) * Layer 3: Component Tokens (Component contract bindings: Buttons, Cards, Modals, Inputs, Navigation, Tables) * * GOVERNANCE: * - WCAG 2.2 AA Contrast Compliance (Normal text >= 4.5:1, Large text >= 3.0:1) * - Dark mode base: Charcoal Slate (#0b0f19 / #131b2e) — No green cast, zero raw glare * - Progressive enhancement for OKLCH & CSS color-mix() * ============================================================================= */ :root { /* ------------------------------------------------------------------------- LAYER 1: PRIMITIVE TOKENS — COLOR SCALES (sRGB Base + OKLCH Overrides) ------------------------------------------------------------------------- */ /* Neutrals: Pure Slate Scale */ --prim-slate-0: #ffffff; --prim-slate-50: #f8fafc; --prim-slate-100: #f1f5f9; --prim-slate-200: #e2e8f0; --prim-slate-300: #cbd5e1; --prim-slate-400: #94a3b8; --prim-slate-500: #64748b; --prim-slate-600: #475569; --prim-slate-700: #334155; --prim-slate-800: #1e293b; --prim-slate-850: #131b2e; --prim-slate-900: #0f172a; --prim-slate-925: #101726; --prim-slate-950: #0b0f19; --prim-slate-975: #070a10; /* Status Scales (sRGB) */ --prim-success-50: #ecfdf5; --prim-success-100: #d1fae5; --prim-success-500: #10b981; --prim-success-600: #059669; --prim-success-700: #047857; --prim-warning-50: #fffbeb; --prim-warning-100: #fef3c7; --prim-warning-500: #f59e0b; --prim-warning-600: #d97706; --prim-warning-700: #b45309; --prim-danger-50: #fef2f2; --prim-danger-100: #fee2e2; --prim-danger-500: #ef4444; --prim-danger-600: #dc2626; --prim-danger-700: #b91c1c; --prim-info-50: #eff6ff; --prim-info-100: #dbeafe; --prim-info-500: #3b82f6; --prim-info-600: #2563eb; --prim-info-700: #1d4ed8; /* ------------------------------------------------------------------------- LAYER 1: PRIMITIVE TOKENS — SPACING SYSTEM (8px Base Grid) ------------------------------------------------------------------------- */ --space-2xs: 0.125rem; /* 2px */ --space-xs: 0.25rem; /* 4px (tight pairings) */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ --space-4xl: 4rem; /* 64px */ /* ------------------------------------------------------------------------- LAYER 1: PRIMITIVE TOKENS — TYPOGRAPHY (Major Third Scale: 1.25) ------------------------------------------------------------------------- */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px (1.25^1) */ --font-size-xl: 1.5625rem; /* 25px (1.25^2) */ --font-size-2xl: 1.953rem; /* 31.25px (1.25^3) */ --font-size-3xl: 2.441rem; /* 39px (1.25^4) */ --font-size-4xl: 3.052rem; /* 48.8px (1.25^5) */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ------------------------------------------------------------------------- LAYER 1: PRIMITIVE TOKENS — RADIUS SCALE ------------------------------------------------------------------------- */ --radius-xs: 0.375rem; /* 6px */ --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ --radius-2xl: 2rem; /* 32px */ --radius-full: 9999px; /* ------------------------------------------------------------------------- LAYER 1: PRIMITIVE TOKENS — ELEVATION LADDER (Light Mode Foundation) ------------------------------------------------------------------------- */ --elevation-0: none; --elevation-1: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04); --elevation-2: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --elevation-3: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); --elevation-4: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04); --elevation-5: 0 25px 50px -12px rgba(15, 23, 42, 0.25); /* ------------------------------------------------------------------------- LAYER 2: SEMANTIC TOKENS — LIGHT MODE ------------------------------------------------------------------------- */ /* Surfaces */ --bg-canvas: var(--prim-slate-50); --bg-surface: var(--prim-slate-0); --bg-surface-raised: var(--prim-slate-0); --bg-surface-muted: var(--prim-slate-100); --bg-overlay: rgba(15, 23, 42, 0.70); /* Brand semantics */ --bg-brand-subtle: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.08); --bg-brand-muted: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.14); --bg-brand-solid: var(--brand-primary, #059669); --bg-accent-subtle: rgba(var(--brand-accent-rgb, 217, 119, 6), 0.08); --bg-accent-solid: var(--brand-accent, #d97706); /* Typography */ --text-primary: var(--prim-slate-900); --text-secondary: var(--prim-slate-700); --text-muted: var(--prim-slate-500); --text-inverse: var(--prim-slate-0); --text-brand: var(--brand-primary, #059669); --text-accent: var(--brand-accent, #d97706); /* Borders */ --border-subtle: var(--prim-slate-200); --border-default: var(--prim-slate-300); --border-strong: var(--prim-slate-400); --border-brand: var(--brand-primary, #059669); --border-focus: var(--brand-primary, #059669); /* Feedback / Status */ --bg-success: var(--prim-success-50); --fg-success: var(--prim-success-700); --border-success: var(--prim-success-100); --bg-warning: var(--prim-warning-50); --fg-warning: var(--prim-warning-700); --border-warning: var(--prim-warning-100); --bg-danger: var(--prim-danger-50); --fg-danger: var(--prim-danger-700); --border-danger: var(--prim-danger-100); --bg-info: var(--prim-info-50); --fg-info: var(--prim-info-700); --border-info: var(--prim-info-100); --focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb, 5, 150, 105), 0.25); /* ------------------------------------------------------------------------- LAYER 3: COMPONENT TOKENS — LIGHT MODE ------------------------------------------------------------------------- */ /* Cards */ --card-bg: var(--prim-slate-0); --card-border: var(--prim-slate-200); --card-shadow: var(--elevation-1); --card-shadow-hover: var(--elevation-3); --card-title-fg: var(--prim-slate-900); --card-body-fg: var(--prim-slate-700); --card-muted-fg: var(--prim-slate-500); /* Stat Cards */ --stat-bg: var(--prim-slate-0); --stat-border: var(--prim-slate-200); --stat-value-fg: var(--brand-primary, #059669); --stat-label-fg: var(--prim-slate-500); --stat-icon-bg: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.10); --stat-icon-fg: var(--brand-primary, #059669); /* Buttons */ --btn-primary-bg: var(--brand-primary, #059669); --btn-primary-fg: var(--brand-primary-fg, #ffffff); --btn-primary-shadow: 0 4px 14px rgba(var(--brand-primary-rgb, 5, 150, 105), 0.35); --btn-secondary-bg: var(--prim-slate-100); --btn-secondary-fg: var(--prim-slate-800); --btn-secondary-border: var(--prim-slate-300); --btn-danger-bg: var(--prim-danger-600); --btn-danger-fg: #ffffff; /* Inputs */ --input-bg: var(--prim-slate-0); --input-border: var(--prim-slate-300); --input-fg: var(--prim-slate-900); --input-placeholder: var(--prim-slate-400); --input-radius: var(--radius-md); --input-focus-border: var(--brand-primary, #059669); --input-focus-ring: var(--focus-ring); --label-fg: var(--prim-slate-600); /* Navigation */ --nav-bg: var(--prim-slate-0); --nav-border: var(--prim-slate-200); --nav-item-fg: var(--prim-slate-600); --nav-item-hover-bg: var(--prim-slate-100); --nav-item-hover-fg: var(--prim-slate-900); --nav-item-active-bg: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.10); --nav-item-active-fg: var(--brand-primary, #059669); --nav-item-active-bar: var(--brand-primary, #059669); --nav-section-fg: var(--prim-slate-400); --nav-badge-bg: var(--brand-primary, #059669); --nav-badge-fg: var(--prim-slate-0); /* Topbar */ --topbar-bg: rgba(255, 255, 255, 0.96); --topbar-border: var(--prim-slate-200); --topbar-fg: var(--prim-slate-700); /* Modals & Dialogs (Solid, Opaque Surfaces - Zero Glare/Bleedthrough) */ --modal-backdrop: rgba(15, 23, 42, 0.70); --modal-bg: #ffffff; --modal-border: var(--prim-slate-200); --modal-shadow: var(--elevation-5); --modal-fg: var(--prim-slate-900); --modal-muted-fg: var(--prim-slate-500); /* Tables */ --table-bg: var(--prim-slate-0); --table-th-bg: var(--prim-slate-50); --table-th-fg: var(--prim-slate-600); --table-th-border: var(--prim-slate-200); --table-td-fg: var(--prim-slate-700); --table-td-border: var(--prim-slate-100); --table-row-hover-bg: var(--prim-slate-50); --table-stripe-bg: var(--prim-slate-50); /* Dropdowns */ --dropdown-bg: var(--prim-slate-0); --dropdown-border: var(--prim-slate-200); --dropdown-shadow: var(--elevation-3); --dropdown-item-hover: var(--prim-slate-100); /* Badges */ --badge-brand-bg: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.10); --badge-brand-fg: var(--brand-primary, #059669); --badge-brand-border: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.25); --badge-accent-bg: rgba(var(--brand-accent-rgb, 217, 119, 6), 0.10); --badge-accent-fg: var(--brand-accent, #d97706); --badge-success-bg: #dcfce7; --badge-success-fg: #15803d; --badge-warning-bg: #fef3c7; --badge-warning-fg: #b45309; --badge-danger-bg: #fee2e2; --badge-danger-fg: #b91c1c; --badge-info-bg: #dbeafe; --badge-info-fg: #1d4ed8; --badge-neutral-bg: var(--prim-slate-100); --badge-neutral-fg: var(--prim-slate-600); /* Footer */ --footer-bg: var(--prim-slate-0); --footer-border: var(--prim-slate-200); --footer-fg: var(--prim-slate-700); --footer-muted: var(--prim-slate-500); --footer-link: var(--brand-primary, #059669); /* Scrollbar */ --scrollbar-thumb: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.30); --scrollbar-thumb-hover: var(--brand-primary, #059669); } /* ============================================================================= DARK MODE TOKENS (True Obsidian Midnight Black — #05070a Canvas / #0d1117 Surface) ============================================================================= */ html.dark { /* Elevations: Deep Obsidian Layered Shadows */ --elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.70), 0 1px 2px -1px rgba(0, 0, 0, 0.50); --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.80), 0 2px 4px -2px rgba(0, 0, 0, 0.60); --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.90), 0 4px 6px -4px rgba(0, 0, 0, 0.70); --elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.95), 0 8px 10px -6px rgba(0, 0, 0, 0.80); --elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.98); /* Surfaces - Obsidian Midnight (True Rich Black) */ --bg-canvas: #05070a; --bg-surface: #0d1117; --bg-surface-raised: #141923; --bg-surface-muted: #090d13; --bg-overlay: rgba(0, 0, 0, 0.88); /* Brand semantics */ --bg-brand-subtle: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.16); --bg-brand-muted: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.24); --bg-accent-subtle: rgba(var(--brand-accent-rgb, 217, 119, 6), 0.16); /* Typography */ --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #8492a6; --text-inverse: #05070a; --text-brand: var(--brand-primary, #059669); --text-accent: var(--brand-accent, #d97706); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --border-brand: var(--brand-primary, #059669); --border-focus: var(--brand-primary, #059669); /* Feedback / Status */ --bg-success: rgba(16, 185, 129, 0.15); --fg-success: #6ee7b7; --border-success: rgba(52, 211, 153, 0.30); --bg-warning: rgba(245, 158, 11, 0.15); --fg-warning: #fcd34d; --border-warning: rgba(251, 191, 36, 0.30); --bg-danger: rgba(239, 68, 68, 0.15); --fg-danger: #fca5a5; --border-danger: rgba(248, 113, 113, 0.30); --bg-info: rgba(59, 130, 246, 0.15); --fg-info: #93c5fd; --border-info: rgba(147, 197, 253, 0.30); --focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb, 5, 150, 105), 0.35); /* Components - Dark */ --card-bg: #0d1117; --card-border: rgba(255, 255, 255, 0.07); --card-shadow: var(--elevation-2); --card-shadow-hover: var(--elevation-4); --card-title-fg: #f8fafc; --card-body-fg: #cbd5e1; --card-muted-fg: #8492a6; --stat-bg: #0d1117; --stat-border: rgba(255, 255, 255, 0.07); --stat-value-fg: var(--brand-primary, #059669); --stat-label-fg: #8492a6; --stat-icon-bg: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.18); --stat-icon-fg: var(--brand-primary, #059669); --btn-primary-bg: var(--brand-primary, #059669); --btn-primary-fg: var(--brand-primary-fg, #ffffff); --btn-primary-shadow: 0 4px 14px rgba(var(--brand-primary-rgb, 5, 150, 105), 0.40); --btn-secondary-bg: #141923; --btn-secondary-fg: #e2e8f0; --btn-secondary-border: rgba(255, 255, 255, 0.10); --btn-danger-bg: #dc2626; --btn-danger-fg: #ffffff; --input-bg: #090d13; --input-border: #232b38; --input-fg: #f8fafc; --input-placeholder: #5b697c; --input-focus-border: var(--brand-primary, #059669); --input-focus-ring: var(--focus-ring); --label-fg: #8492a6; --nav-bg: #080b10; --nav-border: rgba(255, 255, 255, 0.05); --nav-item-fg: #8492a6; --nav-item-hover-bg: #121722; --nav-item-hover-fg: #ffffff; --nav-item-active-bg: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.18); --nav-item-active-fg: #ffffff; --nav-item-active-bar: var(--brand-primary, #059669); --nav-section-fg: #455163; --nav-badge-bg: var(--brand-primary, #059669); --nav-badge-fg: #ffffff; --topbar-bg: rgba(8, 11, 16, 0.96); --topbar-border: rgba(255, 255, 255, 0.06); --topbar-fg: #cbd5e1; /* Modals & Dialogs (Solid, Opaque Deep Surface) */ --modal-backdrop: rgba(0, 0, 0, 0.88); --modal-bg: #0d1117; --modal-border: rgba(255, 255, 255, 0.10); --modal-shadow: var(--elevation-5); --modal-fg: #f8fafc; --modal-muted-fg: #8492a6; --table-bg: #0d1117; --table-th-bg: #090d13; --table-th-fg: #8492a6; --table-th-border: rgba(255, 255, 255, 0.05); --table-td-fg: #cbd5e1; --table-td-border: rgba(255, 255, 255, 0.03); --table-row-hover-bg: #141923; --table-stripe-bg: rgba(255, 255, 255, 0.015); --dropdown-bg: #0d1117; --dropdown-border: rgba(255, 255, 255, 0.09); --dropdown-shadow: var(--elevation-4); --dropdown-item-hover: #141923; --badge-brand-bg: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.18); --badge-brand-fg: var(--brand-primary, #059669); --badge-brand-border: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.35); --badge-accent-bg: rgba(var(--brand-accent-rgb, 217, 119, 6), 0.18); --badge-accent-fg: var(--brand-accent, #d97706); --badge-success-bg: rgba(16, 185, 129, 0.15); --badge-success-fg: #6ee7b7; --badge-warning-bg: rgba(245, 158, 11, 0.15); --badge-warning-fg: #fcd34d; --badge-danger-bg: rgba(239, 68, 68, 0.15); --badge-danger-fg: #fca5a5; --badge-info-bg: rgba(59, 130, 246, 0.15); --badge-info-fg: #93c5fd; --badge-neutral-bg: #141923; --badge-neutral-fg: #8492a6; --footer-bg: #05070a; --footer-border: rgba(255, 255, 255, 0.05); --footer-fg: #cbd5e1; --footer-muted: #8492a6; --footer-link: var(--brand-primary, #059669); --scrollbar-thumb: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.35); --scrollbar-thumb-hover: var(--brand-primary, #059669); } /* ============================================================================= PROGRESSIVE ENHANCEMENT: MODERN OKLCH WIDE-GAMUT COLOR SPACES ============================================================================= */ @supports (color: oklch(0.6 0.2 160)) { :root { --prim-slate-50: oklch(0.98 0.005 240); --prim-slate-100: oklch(0.96 0.010 240); --prim-slate-200: oklch(0.92 0.012 240); --prim-slate-800: oklch(0.27 0.030 255); --prim-slate-850: oklch(0.21 0.035 260); --prim-slate-900: oklch(0.18 0.032 260); --prim-slate-950: oklch(0.12 0.025 260); } }