:root { /* ValidCoupon Design System Variables */ /* Core Colors */ --color-primary: #5B3DF5; /* Premium Purple */ --color-primary-hover: #4a2de0; --color-primary-light: #eeebff; /* Text Colors */ --text-main: #09090B; /* Almost black */ --text-muted: #71717A; /* Zinc 500 */ --text-light: #A1A1AA; /* Zinc 400 */ /* Monochromatic Colors */ --bg-main: #FFFFFF; --bg-secondary: #FAFAFA; --bg-tertiary: #F3F4F6; /* Structural Colors */ --border-color: #E4E4E7; /* Zinc 200 - Very subtle */ --border-hover: #D4D4D8; --border-light: #f8fafc; /* Slate 50 */ /* Semantic Colors */ --color-primary: #000000; /* Pure black for primary actions */ --color-primary-hover: #27272A; --color-primary-bg: #F4F4F5; --color-success: #10B981; /* Keep a muted green for 'Verified' */ --color-success-bg: #dcfce7; --color-danger: #EF4444; /* Muted red for discounts */ --color-danger-bg: #fee2e2; --color-warning: #F59E0B; --color-warning-bg: #fef3c7; /* Typography */ --font-main: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Radii - Sharp and minimal */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; /* Shadows - Flat design, mostly relying on borders */ --shadow-sm: none; --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05); --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.06), 0 8px 12px -6px rgba(0, 0, 0, 0.04); --shadow-hover: 0 20px 32px -8px rgba(0, 0, 0, 0.08), 0 12px 16px -8px rgba(0, 0, 0, 0.06); --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Layout Constraints */ --container-width: 100%; --sidebar-width: 0px; --sidebar-right-width: 0px; --header-height: 76px; /* Animations */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Sidebar active/hover colors */ --sidebar-active-bg: #f1f5f9; --sidebar-active-color: #0f172a; /* Table header */ --table-th-bg: #111827; --table-th-color: #ffffff; --table-th-border: #374151; } /* ============================================================ Dark Mode Overrides Applied when .dark-mode class is on or ============================================================ */ .dark-mode { /* Backgrounds */ --bg-main: #0f172a; /* Slate 900 */ --bg-secondary: #1e293b; /* Slate 800 */ --bg-tertiary: #334155; /* Slate 700 */ /* Text */ --text-main: #f1f5f9; /* Slate 100 */ --text-muted: #94a3b8; /* Slate 400 */ --text-light: #64748b; /* Slate 500 */ /* Borders */ --border-color: #334155; /* Slate 700 */ --border-light: #1e293b; /* Slate 800 */ /* Semantic — keep accessible but slightly muted */ --color-success-bg: #052e16; --color-danger-bg: #450a0a; --color-warning-bg: #431407; --color-primary-light: #1e3a5f; /* Shadows — more subtle on dark */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --shadow-hover: 0 14px 24px -6px rgba(0, 0, 0, 0.6), 0 6px 12px -4px rgba(0, 0, 0, 0.5); /* Sidebar active */ --sidebar-active-bg: #1e293b; --sidebar-active-color: #f1f5f9; /* Table header */ --table-th-bg: #1e293b; --table-th-color: #f1f5f9; --table-th-border: #334155; }