/* ========================================================================== MAKINA.az — Design Tokens (single source of truth) Loaded in BEFORE main.css and all page CSS, so every stylesheet (Vite-bundled main.css + static design/*.css) can consume var(--token). Do NOT hardcode brand hex values in page CSS — always use these tokens. ========================================================================== */ :root { /* --- Brand: orange ---------------------------------------------------- */ --primary: #f7971c; --primary-dark: #e08610; /* default hover */ --primary-darker: #c56d00; /* active / pressed */ --primary-hover: #e08610; /* alias for legacy usage */ --brand-orange: #f7971c; /* legacy alias */ --primary-color: #f7971c; /* legacy alias */ --primary-orange: #f7971c; /* legacy alias */ --accent-color: #f7971c; /* legacy alias */ --mb-primary: #f7971c; /* legacy alias (mobile) */ /* Orange tints (backgrounds, soft fills, focus rings) */ --primary-50: #fff7ed; --primary-100: #fff3e0; --primary-200: #fed7aa; --primary-ring: rgba(247, 151, 28, 0.15); /* --- Brand: dark / secondary ----------------------------------------- */ --secondary: #2c3e50; --dark: #333333; --dark-text: #333333; /* legacy alias */ --deep-blue: #2c3e50; /* legacy alias */ --dark-900: #0f172a; /* premium hero backgrounds */ --dark-800: #1e293b; --brand-blue: #2c3e50; /* --- Neutrals: surfaces & borders ------------------------------------ */ --white: #ffffff; --light-bg: #f8f8f8; --gray-50: #f8f8f8; --gray-100: #f4f6f9; --gray-200: #f1f2f6; --gray-300: #ececec; --gray-400: #e0e0e0; --gray-500: #c9c9c9; --gray-600: #999999; --gray-700: #777777; --gray-800: #555555; --border: #e0e0e0; --border-light: #ececec; --border-lighter: #eeeeee; --footer-text: #777777; --footer-heading: #333333; /* --- Semantic --------------------------------------------------------- */ --success: #27ae60; --success-bright: #2ed573; --danger: #e74c3c; --danger-bright: #ff4757; --premium: #ff3e3e; --info: #3498db; --warning: #f39c12; /* --- Typography ------------------------------------------------------- */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.5; /* --- Spacing scale (4px base) ---------------------------------------- */ --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; /* --- Radius ----------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* --- Shadow ----------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.28); /* --- Motion ----------------------------------------------------------- */ --transition: all 0.3s ease; --transition-fast: all 0.15s ease; /* --- Layout ----------------------------------------------------------- */ --container-max: 1140px; --container-pad: 20px; /* * Responsive breakpoints (reference only — CSS custom properties cannot * be used inside @media queries). Use these exact widths project-wide: * --bp-sm: 480px; phones * --bp-md: 768px; tablets (primary mobile/desktop gate) * --bp-lg: 992px; nav desktop split * --bp-xl: 1200px; wide desktop */ }