/* ============================================================================ i-free 2026 — Design Tokens (single source of truth) ---------------------------------------------------------------------------- Версия: 2.0.0 Источник идентичности: ifree-site/src/app/globals.css Инженерная структура (semantic states, radius-scale, chart palette, sidebar tokens, dark-first) — по образцу nii-ii-free-uikit, но в цветах i-Free. Все семплы (vanilla / React / Vue / Next) импортируют ИМЕННО этот файл, чтобы брендовая палитра жила в одном месте. Re-skinning — только значения, имена токенов не меняются. Темы: :root → ТЁМНАЯ (основная, dark-first — см. CLAUDE.md §15) [data-theme=light]→ СВЕТЛАЯ (опциональная) ============================================================================ */ :root { /* ─── Бренд-оси ──────────────────────────────────────────────────────── */ /* Base — глубокая ночь */ --bg-deep: #0B1026; --bg-night: #111B3A; --bg-twilight: #1A2550; --bg-elevated: #22305E; /* Dawn — тёплая ось (заря): pink / peach / blush / coral */ --dawn-pink: #F2A7B3; --dawn-peach: #F5C6AA; --dawn-blush: #E8899A; --dawn-coral: #F07B8A; /* Aurora — холодная ось (северное сияние): mint / teal / ice / sky */ --aurora-mint: #A8E6CF; --aurora-teal: #7EC8C8; --aurora-ice: #B4E4F7; --aurora-sky: #89B8D9; /* ─── Текст и UI ─────────────────────────────────────────────────────── */ --text-primary: #F5F8FF; --text-secondary: #B8C4D8; --text-muted: #6B7B99; /* ─── Glass ──────────────────────────────────────────────────────────── */ --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.08); --glass-hover: rgba(255, 255, 255, 0.08); /* ─── Stars ──────────────────────────────────────────────────────────── */ --star-bright: #FFFFFF; --star-medium: rgba(255, 255, 255, 0.6); --star-dust: rgba(255, 255, 255, 0.25); /* ─── Семантические поверхности (depth: дальше → ближе) ──────────────── */ --background: var(--bg-deep); --foreground: var(--text-primary); --card: var(--bg-night); --card-foreground: var(--text-primary); --popover: var(--bg-twilight); --popover-foreground: var(--text-primary); --muted: rgba(255, 255, 255, 0.04); --muted-foreground: var(--text-secondary); /* ─── Семантические акценты ──────────────────────────────────────────── */ --primary: var(--aurora-teal); --primary-foreground: #06122B; --primary-hover: var(--aurora-mint); --secondary: rgba(255, 255, 255, 0.06); --secondary-foreground: var(--text-primary); --secondary-hover: rgba(255, 255, 255, 0.10); --accent: var(--dawn-pink); --accent-foreground: #2A0E16; --accent-hover: var(--dawn-peach); /* состояния */ --success: #5BD9A4; --success-foreground: #06231A; --success-hover: #7DE6BC; --warning: #F0B86E; --warning-foreground: #2B1B08; --warning-hover: #F6CC92; --info: #6FA8DC; --info-foreground: #07172B; --info-hover: #93C2EC; --destructive: #F0617A; --destructive-foreground:#2C0810; --destructive-hover: #F4849A; /* ─── Служебные ──────────────────────────────────────────────────────── */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --input: rgba(255, 255, 255, 0.06); --ring: var(--aurora-teal); /* ─── Chart palette (дашборды) ───────────────────────────────────────── */ --chart-1: var(--aurora-teal); --chart-2: var(--aurora-mint); --chart-3: var(--aurora-sky); --chart-4: var(--dawn-pink); --chart-5: var(--dawn-coral); --chart-6: var(--dawn-peach); --chart-7: var(--aurora-ice); --chart-8: #B79CF0; /* ─── Sidebar (своя глубина) ─────────────────────────────────────────── */ --sidebar: #0E1531; --sidebar-foreground: var(--text-secondary); --sidebar-primary: var(--aurora-teal); --sidebar-primary-foreground: #06122B; --sidebar-accent: rgba(255, 255, 255, 0.05); --sidebar-accent-foreground: var(--text-primary); --sidebar-border: rgba(255, 255, 255, 0.07); --sidebar-ring: var(--aurora-teal); /* ─── Радиусы — input/control/overlay шкала ──────────────────────────── */ --radius-sm: 0.375rem; /* 6px — инпуты, мелкие чипы */ --radius-md: 0.625rem; /* 10px — кнопки, бэйджи, контролы */ --radius-lg: 1rem; /* 16px — карточки, модалки, поповеры */ --radius-xl: 1.5rem; /* 24px — крупные hero-блоки */ --radius: var(--radius-lg); /* ─── Тени ───────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-overlay: 0 12px 40px -8px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.40); /* ─── Градиенты (характерные для бренда) ─────────────────────────────── */ --grad-aurora: linear-gradient(135deg, var(--aurora-mint), var(--aurora-teal) 50%, var(--aurora-sky)); --grad-dawn: linear-gradient(135deg, var(--dawn-peach), var(--dawn-pink) 50%, var(--dawn-coral)); --grad-mixed: linear-gradient(135deg, var(--aurora-teal), var(--dawn-pink)); --grad-text: linear-gradient(135deg, var(--aurora-mint), var(--dawn-pink)); /* ─── Типографика fluid (clamp) ──────────────────────────────────────── */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --font-hero: clamp(2.5rem, 4vw, 3.75rem); --font-h1: clamp(2rem, 3.5vw, 3rem); --font-h2: clamp(1.5rem, 2.5vw, 2rem); --font-h3: clamp(1.1rem, 1.5vw, 1.4rem); --font-body: clamp(0.95rem, 1.1vw, 1.0625rem); --font-small: 0.8125rem; --font-number: clamp(2rem, 4vw, 3.5rem); /* ─── Spacing scale ──────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ─── Motion ─────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; } /* ─────────────────────────────────────────────────────────────────────── */ /* СВЕТЛАЯ ТЕМА — опциональная. Активируется data-theme="light" на . */ /* ─────────────────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg-deep: #F7F9FC; --bg-night: #FFFFFF; --bg-twilight: #FFFFFF; --bg-elevated: #FFFFFF; --text-primary: #0F1834; --text-secondary: #45526E; --text-muted: #8593AE; --glass-bg: rgba(11, 16, 38, 0.03); --glass-border: rgba(11, 16, 38, 0.08); --glass-hover: rgba(11, 16, 38, 0.05); --background: var(--bg-deep); --foreground: var(--text-primary); --card: var(--bg-night); --card-foreground: var(--text-primary); --popover: #FFFFFF; --popover-foreground: var(--text-primary); --muted: rgba(11, 16, 38, 0.035); --muted-foreground: var(--text-secondary); --primary: #1B8C8C; --primary-foreground: #FFFFFF; --primary-hover: #146E6E; --secondary: rgba(11, 16, 38, 0.05); --secondary-foreground: var(--text-primary); --secondary-hover: rgba(11, 16, 38, 0.09); --accent: #D85C72; --accent-foreground: #FFFFFF; --accent-hover: #C24A60; --success: #1F9D6B; --success-foreground: #FFFFFF; --success-hover: #178055; --warning: #C98A2E; --warning-foreground: #FFFFFF; --warning-hover: #A9731F; --info: #2D6FB8; --info-foreground: #FFFFFF; --info-hover: #225A97; --destructive: #D6324D; --destructive-foreground:#FFFFFF; --destructive-hover: #B5263E; --border: rgba(11, 16, 38, 0.10); --border-strong: rgba(11, 16, 38, 0.18); --input: rgba(11, 16, 38, 0.04); --ring: #1B8C8C; --sidebar: #FFFFFF; --sidebar-foreground: var(--text-secondary); --sidebar-primary: #1B8C8C; --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: rgba(11, 16, 38, 0.04); --sidebar-accent-foreground: var(--text-primary); --sidebar-border: rgba(11, 16, 38, 0.08); --sidebar-ring: #1B8C8C; --shadow-sm: 0 1px 2px rgba(15, 24, 52, 0.08); --shadow-md: 0 4px 16px rgba(15, 24, 52, 0.10); --shadow-overlay: 0 12px 40px -8px rgba(15, 24, 52, 0.18), 0 4px 12px -4px rgba(15, 24, 52, 0.12); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }