/** * ================================================================= * VARIABLES - The Single Source of Truth for the Design System * Project: Dr. Orel Website * ================================================================= * * This file defines all global CSS variables for the project. * It includes color palettes for all themes, typography scales, * spacing units, and other core design tokens. * * How to use: * 1. Import this file at the very top of your main `style.css`. * 2. Use variables in your CSS: `color: var(--color-primary);` * 3. To change the theme, set the `data-theme` attribute on the tag. * e.g., */ /* ================================================================= 1. CORE THEME & COLOR PALETTE ================================================================= */ /* Default Theme: Blue */ :root { /* -- Primary Colors (Blue Theme) -- */ --color-primary: #2563EB; --color-primary-rgb: 37, 99, 235; --color-primary-hover: #1D4ED8; --color-primary-light: #DBEAFE; --color-accent: #FFD700; /* -- State & Accent Colors -- */ --color-success: #10B981; --color-warning: #F59E0B; --color-error: #EF4444; --color-white: #FFFFFF; --color-black: #000000; /* -- Text Colors -- */ --color-text-primary: #111827; /* For headings and main text */ --color-text-secondary: #6B7280; /* For subtitles and descriptions */ --color-text-light: #9CA3AF; /* For placeholders and disabled text */ --color-text-inverted: var(--color-white); /* Text on dark/primary backgrounds */ /* -- Background & Surface Colors -- */ --bg-body: var(--color-white); --bg-section-alt: #F9FAFB; --bg-surface: var(--color-white); /* For cards, modals etc. */ /* -- Border & Divider Colors -- */ --color-border: #E5E7EB; } /* Green Theme */ [data-theme="green"] { --color-primary: #16A34A; /* A rich, medical green */ --color-primary-rgb: 22, 163, 74; --color-primary-hover: #15803D; --color-primary-light: #DCFCE7; --color-accent: #FFA726; } /* Maroon (Burgundy) Theme */ [data-theme="maroon"] { --color-primary: #9F1239; /* A deep, professional maroon */ --color-primary-rgb: 159, 18, 57; --color-primary-hover: #881337; --color-primary-light: #FDE4E9; --color-accent: #FF6B9D; } /* ================================================================= 2. TYPOGRAPHY ================================================================= */ :root { /* -- Font Families -- */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; /*--font-heading: 'Manrope', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif;*/ /* -- Font Sizes (Typographic Scale) -- */ --text-xss: 0.625rem; /* 10px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px (default) */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 4rem; /* 64px */ /* -- Font Weights -- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* -- Line Heights -- */ --leading-none: 1; --leading-tight: 1.25; --leading-normal: 1.6; --leading-loose: 2; } /* ================================================================= 3. SPACING & SIZING ================================================================= */ :root { /* -- Consistent Spacing Scale (based on 4px grid) -- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ } /* ================================================================= 4. LAYOUT & GRID ================================================================= */ :root { /* -- Container -- */ --container-width: 1140px; --container-padding: 1.5rem; /* -- Header -- */ --header-height-desktop: 80px; --header-height-mobile: 70px; /* -- Z-Indexes -- */ --z-header: 1000; --z-dropdown: 1010; --z-modal-backdrop: 1040; --z-modal: 1050; --z-fab: 1030; } /* ================================================================= 5. BORDERS, SHADOWS & EFFECTS ================================================================= */ :root { /* -- Border Radius -- */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 9999px; /* For pills and circles */ /* -- Box Shadows -- */ /* Use theme color for a subtle, branded glow */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(var(--color-primary-rgb), 0.1), 0 4px 6px -4px rgba(var(--color-primary-rgb), 0.1); --shadow-xl: 0 20px 25px -5px rgba(var(--color-primary-rgb), 0.1), 0 8px 10px -6px rgba(var(--color-primary-rgb), 0.1); /* -- Transitions -- */ --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================================= FOOTER THEME COLORS - Refined Version ================================================================= */ :root { /* Footer background - темный, но не агрессивный */ --footer-bg-primary: #1F2937; --footer-bg-secondary: #111827; --footer-bg-accent: var(--color-primary); --footer-text-primary: #F9FAFB; --footer-text-secondary: #D1D5DB; --footer-text-muted: #9CA3AF; --footer-border: rgba(255, 255, 255, 0.1); --footer-hover-bg: rgba(255, 255, 255, 0.05); } /* Blue theme footer - умеренный синий акцент */ [data-theme="blue"] { --footer-bg-accent: var(--color-primary); } /* Green theme footer - приглушенный зеленый */ [data-theme="green"] { --footer-bg-accent: #059669; /* Более темный зеленый */ } /* Maroon theme footer - благородный бордовый */ [data-theme="maroon"] { --footer-bg-accent: #7C2D12; /* Более темный и благородный */ }