/* ═══════════════════════════════════════════════════════════════════ DESIGN TOKENS — LuckyJetInfo ─────────────────────────────────────────────────────────────────── Источник правды для цветов, шрифтов, отступов, теней, анимаций. Унаследовано из Claude Design (colors_and_type.css), расширено локальными @font-face декларациями и semantic-алиасами. ═══════════════════════════════════════════════════════════════════ */ /* ─── СВОИ ШРИФТЫ (self-hosted) ──────────────────────────────── */ /* Inter — основной body-шрифт. Веса: 400, 500, 600, 700, 800 */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter-Bold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Inter-ExtraBold.woff2') format('woff2'); } /* Caveat — рукописный акцент для редакционных аннотаций */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Caveat-Regular.ttf') format('truetype'); } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Caveat-Medium.ttf') format('truetype'); } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Caveat-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Caveat-Bold.ttf') format('truetype'); } /* Sora (display) и JetBrains Mono (numeric) — через Google Fonts CDN @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); */ /* ─── ТОКЕНЫ ────────────────────────────────────────────────── */ :root { /* === ЦВЕТА БРЕНДА === */ --color-primary: #E63946; --color-primary-dark: #B82C3A; --color-primary-light: #FF6B7A; --color-secondary: #1D3557; --color-secondary-dark: #0F1F36; --color-secondary-light:#456185; --color-promocode: #6fc634; --color-promocode-dark: #2ea63c; --color-accent: #FFB703; /* только в иконках warning */ /* === ПОВЕРХНОСТИ === */ --color-bg: #FAF8F4; /* тёплый кремовый — основной фон */ --color-bg-elevated: #FFFFFF; /* карточки */ --color-bg-soft: #F0EDE6; /* мягкая подложка */ --color-bg-inverted: #0F1F36; /* тёмные cinematic-секции */ /* === ТЕКСТ === */ --color-text: #1A1A2E; --color-text-muted: #4A4A5E; --color-text-faint: #8A8A9E; --color-text-inverted: #FAF8F4; /* === ГРАНИЦЫ === */ --color-border: #E0DACB; --color-border-strong: #C9C2B1; --color-border-glass: rgba(255,255,255,0.08); /* === СТАТУСЫ === */ --color-success: #2A9D8F; --color-warning: #E76F51; --color-danger: #C1121F; --color-info: #1D3557; /* === СЕМАНТИЧЕСКИЕ АЛИАСЫ === */ --fg-1: var(--color-text); --fg-2: var(--color-text-muted); --fg-3: var(--color-text-faint); --fg-on-dark: var(--color-text-inverted); --fg-brand: var(--color-primary); --bg-page: var(--color-bg); --bg-card: var(--color-bg-elevated); --bg-soft: var(--color-bg-soft); --bg-cinema: var(--color-bg-inverted); --border-1: var(--color-border); --border-2: var(--color-border-strong); /* === ТИПОГРАФИКА === */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Sora', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --font-accent: 'Caveat', 'Brush Script MT', cursive; /* Fluid scale */ --type-h1: clamp(3rem, 8vw, 6rem); --type-h2: clamp(2.25rem, 5vw, 4rem); --type-h3: clamp(1.5rem, 3vw, 2rem); --type-lede: clamp(1.125rem, 1.5vw, 1.5rem); --type-body: clamp(1rem, 1.2vw, 1.125rem); --type-small: 0.875rem; --type-xs: 0.75rem; --type-stat: clamp(3rem, 9vw, 7rem); /* Веса */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Высоты строк */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-loose: 1.75; /* Tracking */ --tracking-tight: -0.02em; --tracking-wide: 0.12em; /* === ОТСТУПЫ (шкала 4px) === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* === РАДИУСЫ === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 999px; /* === ТЕНИ === */ --shadow-sm: 0 1px 2px rgba(15, 31, 54, 0.05); --shadow-md: 0 4px 12px rgba(15, 31, 54, 0.08), 0 1px 2px rgba(15, 31, 54, 0.05); --shadow-lg: 0 12px 32px rgba(15, 31, 54, 0.12), 0 2px 4px rgba(15, 31, 54, 0.06); --shadow-xl: 0 24px 64px rgba(15, 31, 54, 0.16), 0 4px 8px rgba(15, 31, 54, 0.06); --shadow-glow: 0 0 32px rgba(230, 57, 70, 0.35); --shadow-glow-soft: 0 0 24px rgba(230, 57, 70, 0.22); /* === АНИМАЦИИ === */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; /* === КОНТЕЙНЕРЫ === */ --container-narrow: 720px; --container-base: 1080px; --container-wide: 1280px; /* === Z-INDEX === */ --z-base: 1; --z-header: 100; --z-overlay: 200; --z-modal: 300; } /* ═══ DARK MODE — prefers-color-scheme: dark ═════════════════════ */ @media (prefers-color-scheme: dark) { :root { --color-bg: #0F1F36; --color-bg-elevated: #182B47; --color-bg-soft: #122339; --color-bg-inverted: #060E1C; --color-text: #F2EEE5; --color-text-muted: #A8B3C5; --color-text-faint: #6F7B91; --color-text-inverted: #1A1A2E; --color-border: #25395A; --color-border-strong: #36507A; --color-border-glass: rgba(255,255,255,0.10); --color-primary-light: #FF7E8C; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-glow: 0 0 36px rgba(230, 57, 70, 0.55); --shadow-glow-soft: 0 0 28px rgba(230, 57, 70, 0.4); } }