/* ================================================ ALLA BEAUTY — Design Tokens Єдине джерело правди для всіх стилів Підключати ПЕРШИМ у перед styles.css ================================================ */ :root { color-scheme: light; /* КОЛЬОРИ */ --color-primary: #DE0000; --color-primary-hover: #b30000; --color-accent: #4da3ff; --color-accent-press: #3c83cc; --color-black: #000000; --color-white: #ffffff; --color-bg-light: #f5f5f7; --color-text-main: #000000; --color-text-muted: #5F5F5F; --color-text-inv: #fafafa; --color-error: #ff6b6b; --color-modal-bg: rgba(11, 11, 11, 0.50); --color-surface: #111318; --color-surface-2: #151821; /* ТИПОГРАФІКА — шрифти */ --font-display: "Yanone Kaffeesatz", Helvetica, sans-serif; --font-body: "Open Sans", Helvetica, sans-serif; /* ТИПОГРАФІКА — розміри (desktop) */ --text-hero: 82px; --text-h1: 55px; --text-h2: 49px; --text-h3: 34px; --text-h4: 28px; --text-h5: 24px; --text-body-lg: 20px; --text-body: 17px; --text-body-sm: 15px; --text-caption: 14px; --text-micro: 13px; --text-tiny: 12px; /* LINE-HEIGHT */ --lh-tight: 1.1; --lh-base: 1.3; --lh-relaxed: 1.6; /* ВІДСТУПИ */ --space-4: 4px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-60: 60px; --space-80: 80px; --space-100: 100px; /* РАДІУСИ */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 25px; --radius-3xl: 35px; --radius-full: 9999px; /* ТІНІ */ --shadow-card: 0px 0px 0px 1px rgba(0,0,0,0.10), 0px 1px 2px 0px rgba(0,0,0,0.10); --shadow-modal: 0 10px 30px rgba(0,0,0,0.35); --shadow-review: 0 0 5px rgba(0,0,0,0.20); /* АНІМАЦІЇ */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease-in-out; /* Z-INDEX */ --z-modal-overlay: 10; --z-modal-dialog: 20; --z-spinner: 1; } /* === АДАПТИВНІ ТОКЕНИ === */ @media screen and (max-width: 768px) { :root { --text-hero: 48px; --text-h1: 40px; --text-h2: 40px; } } @media screen and (max-width: 525px) { :root { --text-hero: 60px; --text-h1: 25px; --text-h2: 30px; } } @media screen and (max-width: 425px) { :root { --text-hero: 50px; } } @media screen and (max-width: 375px) { :root { --text-hero: 45px; } }