/* Дизайн-токены проекта Viviski — единый источник */ :root { /* ── Brand (примитивы) ─────────────────── */ --color-gold: #C9982A; --color-gold-light: #E8B84B; --color-gold-pale: #F5E9C8; --color-gold-dark: #8B6E2A; /* Золотой для ТЕКСТА на светлом фоне — контраст ≥4.5:1 (WCAG AA). Ярко-золотой (--color-gold) оставляем для декора/иконок и текста на тёмном. */ --color-gold-text: #856512; --color-dark: #1C1A17; --color-dark-secondary: #2A2720; --color-light: #F5F0E8; --color-light-secondary: #EDE7DA; --color-white: #FFFFFF; --color-coral: #FF4D1C; --color-success: #2D8A5E; --color-success-dim: rgba(45, 138, 94, 0.12); /* ── Typography scale (ПК по умолчанию; телефон/планшет — responsive.css) ── */ --text-xs: clamp(11px, 1.2vw, 13px); --text-sm: clamp(13px, 1.4vw, 15px); --text-base: clamp(15px, 1.6vw, 17px); --text-lg: clamp(17px, 1.8vw, 20px); --text-xl: clamp(20px, 2.2vw, 24px); --text-2xl: clamp(24px, 3vw, 32px); --text-3xl: clamp(32px, 4.5vw, 48px); --text-4xl: clamp(42px, 6vw, 72px); --text-hero: clamp(52px, 8vw, 96px); /* ── Spacing ───────────────────────────── */ --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; --space-20: 80px; --space-24: 96px; /* ── Radius ────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ── Shadows ───────────────────────────── */ --shadow-xs: 0 1px 3px rgba(28, 26, 23, 0.06); --shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.08), 0 1px 2px rgba(28, 26, 23, 0.04); --shadow-md: 0 4px 16px rgba(28, 26, 23, 0.10), 0 2px 6px rgba(28, 26, 23, 0.06); --shadow-lg: 0 12px 40px rgba(28, 26, 23, 0.14); --shadow-xl: 0 32px 80px rgba(28, 26, 23, 0.14); --shadow-gold: 0 0 0 1px rgba(201, 152, 42, 0.2), 0 4px 20px rgba(201, 152, 42, 0.12); --shadow-card: 0 2px 1px rgba(28, 26, 23, 0.04), 0 4px 8px rgba(28, 26, 23, 0.06), 0 8px 24px rgba(28, 26, 23, 0.08); /* ── Animation ─────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 380ms; --duration-enter: 500ms; /* ── Hero lighting samples ─────────────── */ --lighting-glow-dim: 0.45; --lighting-glow-hover: 0.75; --lighting-glow-active: 1; --lighting-neon-cyan: #00D4FF; /* ── Semantic: surfaces ────────────────── */ --color-surface: var(--color-light); --color-surface-muted: var(--color-light-secondary); --color-surface-subtle: var(--color-light-secondary); --color-surface-elevated: var(--color-white); --color-surface-inverse: var(--color-dark); --color-surface-inverse-soft: var(--color-dark-secondary); /* ── Semantic: text colors ───────────── */ --color-text: var(--color-dark); --color-text-muted: #6B6157; --color-text-subtle: #74695E; --color-text-inverse: var(--color-light); --color-text-accent: var(--color-gold-text); /* ── Semantic: borders & overlays ──────── */ --color-border: #E8E0D5; --color-border-strong: #D0C8BC; --color-border-accent: rgba(201, 152, 42, 0.4); --color-gold-dim: rgba(201, 152, 42, 0.12); --color-gold-dim-soft: rgba(201, 152, 42, 0.06); --color-coral-dim: rgba(255, 77, 28, 0.08); /* ── Semantic: icons ───────────────────── */ --color-icon: var(--color-text-muted); --color-icon-primary: var(--color-text); --color-icon-accent: var(--color-gold); --color-icon-inverse: var(--color-text-inverse); /* ── Typography families ───────────────── */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; /* ── Breakpoints: телефон ≤767 | планшет 768–1199 | ПК ≥1200 ── */ --bp-mobile-max: 767px; --bp-tablet-min: 768px; --bp-tablet-narrow-max: 900px; --bp-tablet-wide-min: 901px; --bp-tablet-max: 1199px; --bp-desktop-min: 1200px; /* ── Tablet layout (active 768–1199px via responsive.css) ── */ --tablet-gutter: clamp(20px, 3vw, 32px); --tablet-section-y: clamp(40px, 5vw, 60px); --tablet-radius: 16px; /* ── Mobile layout (canonical targets, active @767px) ── */ --mobile-gutter: 16px; --mobile-content-target: 356px; --touch-min: 44px; --touch-primary: 48px; --mobile-radius: 12px; --mobile-section-gap: 12px; --card-radius: 14px; --card-shadow: var(--shadow-xs); --mobile-bp-narrow: 389px; --mobile-bp-ultra: 360px; --calc-inner-target: 324px; /* ── Layout (переопределяется по tier в responsive.css) ── */ --layout-container: 1280px; --desktop-gutter: clamp(16px, 4vw, 40px); --layout-container-padding: 0 var(--desktop-gutter); --layout-section-y: clamp(var(--space-8), 4vw, 3.5rem); --layout-section-y-compact: clamp(var(--space-4), 2.5vw, var(--space-8)); --layout-section-y-spacious: clamp(var(--space-10), 5vw, var(--space-16)); --layout-header-gap: clamp(var(--space-5), 3vw, var(--space-8)); --layout-block-gap: clamp(var(--space-6), 3.5vw, var(--space-10)); --layout-footer-y: clamp(var(--space-12), 6vw, var(--space-16)); --layout-page-top: clamp(5rem, 8vw, 6.25rem); --layout-page-bottom: clamp(var(--space-10), 4vw, var(--space-12)); /* ── Page background ───────────────────── */ --page-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E"); --page-gradient: linear-gradient( 180deg, var(--color-light) 0%, color-mix(in srgb, var(--color-white) 35%, var(--color-light)) 14%, var(--color-light-secondary) 28%, var(--color-light) 42%, color-mix(in srgb, var(--color-white) 25%, var(--color-light)) 56%, var(--color-light-secondary) 70%, var(--color-light) 84%, color-mix(in srgb, var(--color-light-secondary) 80%, var(--color-light)) 100% ); --footer-transition: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--color-dark) 18%, var(--color-light)) 38%, color-mix(in srgb, var(--color-dark) 52%, var(--color-light-secondary)) 68%, var(--color-dark) 100% ); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* ── Z-index ───────────────────────────── */ --z-base: 1; --z-card: 10; --z-sticky: 100; --z-header: 1000; --z-mobile-overlay: 1001; --z-mobile-menu: 1002; --z-modal: 2000; --z-toast: 3000; /* ── Composed transitions ──────────────── */ --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-normal) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); --transition-spring: var(--duration-enter) var(--ease-spring); } .section-dark { --color-icon: var(--color-text-inverse); --color-icon-primary: var(--color-text-inverse); /* На тёмном фоне золотой текст снова яркий (контраст высокий) */ --color-text-accent: var(--color-gold); }