/* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS 2.0 — AKHMEDOV SH. STUDIO Dark Luxury × Matte Glass × Cinematic Noir × Editorial Engineering ═══════════════════════════════════════════════════════════════ */ :root { /* ─── COLOR SYSTEM ────────────────────────────────────────────── */ --bg: #070709; --surface-0: #070709; --surface-1: #0C0C10; --surface-2: #111116; --surface-3: #17171E; --surface-4: #20202A; --surface-elevated: #15151C; /* Glass Materials */ --glass: rgba(17, 17, 22, 0.72); --glass-heavy: rgba(10, 10, 14, 0.88); --glass-tint: rgba(200, 184, 154, 0.04); --glass-border: rgba(255, 255, 255, 0.08); /* Border Materials */ --border: rgba(255, 255, 255, 0.065); --border-subtle: rgba(255, 255, 255, 0.04); --border-default: rgba(255, 255, 255, 0.08); --border-hi: rgba(255, 255, 255, 0.15); --border-active: rgba(200, 184, 154, 0.45); --border-lo: rgba(255, 255, 255, 0.035); /* Typography Colors */ --text: #EDEDED; --text-primary: #EDEDED; --text-secondary: #B5B5B5; --text-sub: #B5B5B5; --text-muted: #6E6E78; --text-ghost: #3A3A42; /* Accent: Warm Champagne Ivory */ --accent: #C8B89A; --accent-rgb: 200, 184, 154; --accent-soft: rgba(200, 184, 154, 0.12); --accent-dim: rgba(200, 184, 154, 0.12); --accent-glow: rgba(200, 184, 154, 0.20); --accent-hover: #D8CBB2; /* Status Colors */ --success: #34D399; --success-soft: rgba(52, 211, 153, 0.12); --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, 0.12); --info: #60A5FA; --info-soft: rgba(96, 165, 250, 0.12); --white: #FFFFFF; --white-90: rgba(255, 255, 255, 0.90); --white-60: rgba(255, 255, 255, 0.60); --white-20: rgba(255, 255, 255, 0.20); --white-10: rgba(255, 255, 255, 0.10); --white-05: rgba(255, 255, 255, 0.05); /* ─── TYPOGRAPHY ─────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Geist Mono', 'SF Mono', Consolas, monospace; --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.75rem; /* 44px */ --text-4xl: 3.75rem; /* 60px */ --text-5xl: 5rem; /* 80px */ --text-6xl: 6.5rem; /* 104px */ --text-7xl: 8.5rem; /* 136px */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --ls-tightest: -0.055em; --ls-tighter: -0.035em; --ls-tight: -0.02em; --ls-normal: -0.01em; --ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.18em; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; /* ─── SPACING ────────────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --sp-40: 10rem; --sp-48: 12rem; /* ─── RADII ──────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px; /* ─── SHADOWS ────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.6); --shadow-sm: 0 2px 6px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 20px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.45); --shadow-lg: 0 12px 36px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.5); --shadow-xl: 0 24px 72px rgba(0,0,0,0.85); --shadow-floating: 0 30px 90px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08); --shadow-glow: 0 0 40px rgba(200, 184, 154, 0.15); --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.08); --shadow-card: 0 0 0 1px var(--border), 0 8px 32px rgba(0,0,0,0.6); --shadow-nav: 0 0 0 1px var(--border), 0 12px 40px rgba(0,0,0,0.7); /* ─── BLUR ───────────────────────────────────────────────────── */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; --blur-xl: 40px; --blur-ambient: 64px; /* ─── GLOW ───────────────────────────────────────────────────── */ --glow-xs: 0 0 12px rgba(200, 184, 154, 0.12); --glow-sm: 0 0 20px rgba(200, 184, 154, 0.18); --glow-md: 0 0 36px rgba(200, 184, 154, 0.25); --glow-lg: 0 0 60px rgba(200, 184, 154, 0.35); /* ─── LAYOUT ─────────────────────────────────────────────────── */ --max-w: 1260px; --max-w-text: 740px; --gutter: clamp(1.25rem, 4vw, 3rem); /* ─── ANIMATION & MOTION TOKENS ──────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-cinematic: cubic-bezier(0.25, 0.8, 0.25, 1); --ease-snappy: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 80ms; --duration-fast: 160ms; --duration-normal: 280ms; --duration-slow: 450ms; --duration-slower: 700ms; --duration-cinematic: 1000ms; --dur-instant: var(--duration-instant); --dur-fast: var(--duration-fast); --dur-normal: var(--duration-normal); --dur-slow: var(--duration-slow); --dur-slower: var(--duration-slower); --dur-entrance: var(--duration-cinematic); /* ─── Z-INDEX ─────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 1; --z-card: 10; --z-dropdown: 50; --z-overlay: 100; --z-nav: 200; --z-modal: 300; --z-cursor: 9999; }