/* ═══════════════════════════════════════════════════════════ KYNK - CSS VARIABLES Design System: Colors, Typography, Spacing ═══════════════════════════════════════════════════════════ */ :root { /* ═══ PRIMARY COLORS ═══ */ --oxblood: #800020; --oxblood-dark: #5a0016; --oxblood-light: #a6002a; /* ═══ LIGHT MODE ═══ */ --light-body: #fff9f9; --light-card: #fff5f0; --light-header: #ffffff; --light-text: #1a1a1a; --light-text-secondary: #666666; --light-border: #e0e0e0; --light-shadow: rgba(0, 0, 0, 0.1); /* ═══ DARK MODE ═══ */ --dark-body: #121212; --dark-card: #1E1E1E; --dark-header: #1A1A1A; --dark-text: #e0e0e0; --dark-text-secondary: #999999; --dark-border: #333333; --dark-shadow: rgba(0, 0, 0, 0.3); /* ═══ SEMANTIC COLORS ═══ */ --success: #28a745; --success-light: #d4edda; --danger: #dc3545; --danger-light: #f8d7da; --warning: #ffc107; --warning-light: #fff3cd; --info: #17a2b8; --info-light: #d1ecf1; /* ═══ TYPOGRAPHY ═══ */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Poppins', sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 2.5rem; /* 40px */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ═══ SPACING ═══ */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ /* ═══ BORDER RADIUS ═══ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ═══ SHADOWS ═══ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); /* ═══ TRANSITIONS ═══ */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* ═══ Z-INDEX LAYERS ═══ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; /* ═══ NAVBAR ═══ */ --navbar-height: 60px; /* ═══ BREAKPOINTS (for reference in JS) ═══ */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; } /* ═══════════════════════════════════════════════════════════ DARK MODE OVERRIDES Applied when has class "dark-mode" ═══════════════════════════════════════════════════════════ */ body.dark-mode { --body-bg: var(--dark-body); --card-bg: var(--dark-card); --header-bg: var(--dark-header); --text-primary: var(--dark-text); --text-secondary: var(--dark-text-secondary); --border-color: var(--dark-border); --shadow-color: var(--dark-shadow); } /* ═══════════════════════════════════════════════════════════ LIGHT MODE (DEFAULT) ═══════════════════════════════════════════════════════════ */ body:not(.dark-mode) { --body-bg: var(--light-body); --card-bg: var(--light-card); --header-bg: var(--light-header); --text-primary: var(--light-text); --text-secondary: var(--light-text-secondary); --border-color: var(--light-border); --shadow-color: var(--light-shadow); }