/* * Design Tokens — ignashev-ai * AI Consultant Website: Anton Ignashev * Author: frontend-design * Date: 2026-02-24 * * All CSS custom properties for the design system. * This file is loaded BEFORE custom.css. * Do not add layout or component rules here — only tokens. */ :root { /* ============================================================ COLORS — Primary Palette ============================================================ */ /* Obsidian — brand primary */ --color-primary: #0c0b09; --color-primary-light: #141210; --color-primary-lighter: #1c1916; /* Surface / background colors */ --color-surface: #141210; --color-surface-alt: #1a1816; --color-white: #f0ece6; /* ============================================================ COLORS — Accent Palette ============================================================ */ /* Amber Gold — primary brand accent */ --color-accent: #d4a534; --color-accent-hover: #e8b84b; --color-accent-light: #e8b84b; --color-accent-muted: rgba(212, 165, 52, 0.1); --color-accent-glow: rgba(212, 165, 52, 0.28); /* Copper — secondary accent, technical highlights */ --color-cyan: #c9813a; --color-cyan-light: #e09a5a; --color-cyan-muted: rgba(184, 112, 80, 0.12); /* ============================================================ COLORS — Semantic ============================================================ */ --color-success: #10b981; --color-success-light: #d1fae5; --color-success-muted: rgba(16, 185, 129, 0.12); --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-warning-muted: rgba(245, 158, 11, 0.12); --color-danger: #ef4444; --color-danger-light: #fee2e2; --color-danger-muted: rgba(239, 68, 68, 0.12); --color-info: #3b82f6; --color-info-light: #dbeafe; --color-info-muted: rgba(59, 130, 246, 0.12); /* ============================================================ COLORS — Neutral Gray Scale ============================================================ */ --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; /* ============================================================ COLORS — Text ============================================================ */ --color-text-primary: #f0ece6; --color-text-body: #c4bdb4; --color-text-muted: #8a8078; --color-text-inverse: #0c0b09; --color-text-accent: #d4a534; /* ============================================================ COLORS — Gradients ============================================================ */ --gradient-hero: radial-gradient(ellipse 90% 70% at 15% 60%, rgba(28, 20, 8, 0.97) 0%, transparent 60%), #0c0b09; --gradient-accent: linear-gradient(135deg, #d4a534 0%, #e8b84b 50%, #c9813a 100%); --gradient-accent-text: linear-gradient(135deg, #e8b84b, #d4a534, #c9813a); --gradient-surface: linear-gradient(180deg, #141210 0%, #1a1816 100%); --gradient-card-hover: linear-gradient(135deg, rgba(212, 165, 52, 0.04) 0%, rgba(184, 112, 80, 0.04) 100%); /* ============================================================ TYPOGRAPHY — Font Families ============================================================ */ --font-sans: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Courier New', Courier, monospace; /* ============================================================ TYPOGRAPHY — Font Sizes ============================================================ */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* ============================================================ TYPOGRAPHY — Font Weights ============================================================ */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* ============================================================ TYPOGRAPHY — Line Heights ============================================================ */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.75; /* ============================================================ TYPOGRAPHY — Letter Spacing ============================================================ */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; /* ============================================================ SPACING — 8px base grid ============================================================ */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-64: 16rem; /* 256px */ /* ============================================================ LAYOUT ============================================================ */ --container-max: 1280px; --container-prose: 720px; --container-sm: 640px; --container-md: 768px; /* Section rhythm */ --section-padding-y: var(--space-20); /* 80px */ --section-padding-y-hero: var(--space-24); /* 96px */ --section-padding-y-compact: var(--space-12); /* 48px */ /* ============================================================ BORDERS — Radius ============================================================ */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ============================================================ BORDERS — Width ============================================================ */ --border-0: 0; --border: 1px; --border-2: 2px; --border-4: 4px; /* Common border values */ --border-default: 1px solid var(--color-gray-200); --border-dark: 1px solid rgba(255, 255, 255, 0.08); --border-accent: 1px solid rgba(99, 102, 241, 0.3); --border-focus: 1.5px solid var(--color-accent); /* ============================================================ SHADOWS ============================================================ */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.06); --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.1), 0 8px 10px rgba(15, 23, 42, 0.06); --shadow-2xl: 0 25px 50px rgba(15, 23, 42, 0.2); /* Glow shadows — accent color */ --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); --shadow-glow-strong: 0 0 40px rgba(99, 102, 241, 0.5); --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.25); /* Button shadows */ --shadow-btn-primary: 0 4px 14px rgba(99, 102, 241, 0.35); --shadow-btn-primary-hover: 0 6px 20px rgba(99, 102, 241, 0.5); --shadow-btn-danger: 0 4px 14px rgba(239, 68, 68, 0.3); /* Avatar / card image shadow */ --shadow-avatar: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); /* Focus ring */ --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25); /* ============================================================ TRANSITIONS ============================================================ */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; /* Specific easing curves */ --ease-in-out-cubic: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-cubic: cubic-bezier(0, 0, 0.2, 1); --ease-in-cubic: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Transition presets */ --transition-colors: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); --transition-transform: transform var(--transition-base) var(--ease-out-cubic); --transition-shadow: box-shadow var(--transition-base); --transition-all-fast: all var(--transition-fast); --transition-all-base: all var(--transition-base); /* ============================================================ Z-INDEX SCALE ============================================================ */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 50; --z-sticky: 80; --z-navbar: 100; --z-overlay: 150; --z-modal: 200; --z-toast: 250; --z-tooltip: 300; --z-top: 999; /* ============================================================ COMPONENT TOKENS — Buttons ============================================================ */ --btn-font: var(--font-semibold); --btn-font-size: var(--text-sm); /* 14–15px via class */ --btn-radius: var(--radius-md); --btn-padding-y: var(--space-3); /* 12px */ --btn-padding-x: var(--space-7); /* 28px */ --btn-padding-y-sm: var(--space-2); /* 8px */ --btn-padding-x-sm: var(--space-4); /* 16px */ --btn-padding-y-lg: 0.875rem; /* 14px */ --btn-padding-x-lg: var(--space-9); /* 36px */ /* ============================================================ COMPONENT TOKENS — Forms ============================================================ */ --input-padding-y: 0.625rem; /* 10px */ --input-padding-x: 0.875rem; /* 14px */ --input-radius: var(--radius-md); --input-border: 1.5px solid var(--color-gray-300); --input-border-focus: 1.5px solid var(--color-accent); --input-font-size: var(--text-base); --input-line-height: var(--leading-normal); --input-color: var(--color-text-primary); --input-placeholder: var(--color-gray-400); --input-bg: var(--color-white); /* ============================================================ COMPONENT TOKENS — Cards ============================================================ */ --card-radius: var(--radius-lg); --card-padding: var(--space-8); /* 32px */ --card-padding-sm: var(--space-6); /* 24px */ --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg); --card-border: var(--border-default); --card-border-hover: var(--border-accent); --card-bg: var(--color-white); --card-transform-hover: translateY(-4px); /* ============================================================ COMPONENT TOKENS — Navigation ============================================================ */ --nav-height: 68px; --nav-bg-scroll: rgba(15, 23, 42, 0.92); --nav-bg-top: transparent; --nav-blur: blur(12px); --nav-border-scroll: 1px solid rgba(255, 255, 255, 0.08); --nav-link-color: rgba(248, 250, 252, 0.75); --nav-link-hover: #f8fafc; --nav-link-active: #f8fafc; --nav-font: var(--font-medium); --nav-font-size: var(--text-sm); /* 14–15px */ /* ============================================================ COMPONENT TOKENS — Badges ============================================================ */ --badge-font: var(--font-medium); --badge-font-size: var(--text-xs); --badge-radius: var(--radius-full); --badge-padding-y: var(--space-1); /* 4px */ --badge-padding-x: var(--space-2); /* 8px — extended to 10px via 0.625rem */ /* ============================================================ COMPONENT TOKENS — Section Layout ============================================================ */ --section-label-font: var(--font-medium); --section-label-size: var(--text-xs); --section-label-color: var(--color-accent); --section-label-spacing: var(--tracking-widest); /* ============================================================ DARK SURFACE OVERRIDES (nav, hero, footer, admin sidebar) ============================================================ */ --dark-text-primary: #f8fafc; --dark-text-body: rgba(248, 250, 252, 0.75); --dark-text-muted: rgba(248, 250, 252, 0.45); --dark-border: rgba(255, 255, 255, 0.08); --dark-surface-hover: rgba(255, 255, 255, 0.06); } /* * Reduced motion overrides. * All transitions and animations respect user OS preference. */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }