/* ============================================================ DESIGN TOKENS — Minnie Kim OC | Hyper Vision Co. Premium Luxury Real Estate Single source of truth for all visual properties ============================================================ */ :root { /* ---------------------------------------------------------- COLORS — Core Palette ---------------------------------------------------------- */ --hv-bg: #0A0A0A; --hv-surface: #111111; --hv-surface-2: #1A1A1A; --hv-surface-3: #222222; --hv-surface-glass: rgba(255, 255, 255, 0.03); --hv-surface-glass-2: rgba(255, 255, 255, 0.06); /* Gold Accents */ --hv-accent: #FFD700; --hv-accent-hover: #FFE44D; --hv-accent-dim: rgba(255, 215, 0, 0.15); --hv-accent-glow: rgba(255, 215, 0, 0.4); --hv-accent-subtle: rgba(255, 215, 0, 0.08); --hv-accent-dark: #B8960F; /* Text */ --hv-text: #FFFFFF; --hv-text-muted: #A1A1AA; --hv-text-dim: #555555; --hv-text-inverse: #0A0A0A; /* Borders */ --hv-border: rgba(255, 255, 255, 0.08); --hv-border-hover: rgba(255, 215, 0, 0.3); --hv-border-strong: rgba(255, 255, 255, 0.15); /* Overlays */ --hv-overlay: rgba(10, 10, 10, 0.7); --hv-overlay-heavy: rgba(10, 10, 10, 0.85); --hv-overlay-light: rgba(10, 10, 10, 0.4); /* Gradients */ --hv-gradient-gold: linear-gradient(135deg, #FFD700, #FFA500); --hv-gradient-gold-r: linear-gradient(135deg, #FFA500, #FFD700); --hv-gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #111111 100%); --hv-gradient-surface: linear-gradient(180deg, var(--hv-surface) 0%, var(--hv-bg) 100%); /* Atmospheric Mesh Gradients */ --hv-gradient-mesh: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(255, 215, 0, 0.04) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255, 165, 0, 0.03) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 50% 80%, rgba(255, 215, 0, 0.02) 0%, transparent 60%); --hv-gradient-mesh-hero: radial-gradient(ellipse 100% 60% at 30% 50%, rgba(255, 215, 0, 0.06) 0%, transparent 50%), radial-gradient(ellipse 80% 80% at 70% 30%, rgba(255, 165, 0, 0.04) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 50% 90%, rgba(255, 215, 0, 0.03) 0%, transparent 60%); /* Status / Feedback */ --hv-success: #22C55E; --hv-error: #EF4444; --hv-warning: #F59E0B; /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ /* Font Families */ --hv-font-display: 'DM Serif Display', Georgia, serif; --hv-font-heading: 'Outfit', sans-serif; --hv-font-body: 'Outfit', sans-serif; --hv-font-kr: 'Noto Sans KR', sans-serif; --hv-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Font Sizes — modular scale ~1.25 */ --hv-text-xs: 0.6875rem; /* 11px */ --hv-text-sm: 0.8125rem; /* 13px */ --hv-text-base: 1rem; /* 16px */ --hv-text-md: 1.125rem; /* 18px */ --hv-text-lg: 1.25rem; /* 20px */ --hv-text-xl: 1.5rem; /* 24px */ --hv-text-2xl: 1.875rem; /* 30px */ --hv-text-3xl: 2.25rem; /* 36px */ --hv-text-4xl: 2.75rem; /* 44px */ --hv-text-5xl: 3.25rem; /* 52px */ --hv-text-6xl: 4rem; /* 64px */ --hv-text-7xl: 4.5rem; /* 72px */ /* Font Weights */ --hv-weight-light: 300; --hv-weight-regular: 400; --hv-weight-medium: 500; --hv-weight-semibold: 600; --hv-weight-bold: 700; /* Line Heights */ --hv-leading-none: 1; --hv-leading-tight: 1.15; --hv-leading-snug: 1.3; --hv-leading-normal: 1.5; --hv-leading-relaxed: 1.65; --hv-leading-loose: 1.8; /* Letter Spacing */ --hv-tracking-tighter: -0.03em; --hv-tracking-tight: -0.015em; --hv-tracking-normal: 0; --hv-tracking-wide: 0.05em; --hv-tracking-wider: 0.1em; --hv-tracking-widest: 0.2em; /* ---------------------------------------------------------- SPACING — 4px base unit ---------------------------------------------------------- */ --hv-space-0: 0; --hv-space-px: 1px; --hv-space-0-5: 2px; --hv-space-1: 4px; --hv-space-2: 8px; --hv-space-3: 12px; --hv-space-4: 16px; --hv-space-5: 20px; --hv-space-6: 24px; --hv-space-7: 28px; --hv-space-8: 32px; --hv-space-9: 36px; --hv-space-10: 40px; --hv-space-11: 44px; --hv-space-12: 48px; --hv-space-13: 52px; --hv-space-14: 56px; --hv-space-15: 60px; --hv-space-16: 64px; --hv-space-17: 68px; --hv-space-18: 72px; --hv-space-19: 76px; --hv-space-20: 80px; /* Section Spacing */ --hv-section-sm: clamp(60px, 8vw, 100px); --hv-section-md: clamp(80px, 10vw, 140px); --hv-section-lg: clamp(100px, 14vw, 200px); /* Container */ --hv-container-sm: 640px; --hv-container-md: 768px; --hv-container-lg: 1024px; --hv-container-xl: 1280px; --hv-container-2xl: 1440px; --hv-container-pad: clamp(20px, 5vw, 80px); /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --hv-radius-sm: 4px; --hv-radius-md: 8px; --hv-radius-lg: 12px; --hv-radius-xl: 16px; --hv-radius-2xl: 24px; --hv-radius-full: 9999px; /* ---------------------------------------------------------- Z-INDEX LAYERS ---------------------------------------------------------- */ --hv-z-base: 0; --hv-z-above: 10; --hv-z-sticky: 100; --hv-z-nav: 1000; --hv-z-dropdown: 2000; --hv-z-overlay: 3000; --hv-z-modal: 4000; --hv-z-toast: 5000; --hv-z-tooltip: 6000; --hv-z-preloader: 9999; /* ---------------------------------------------------------- TRANSITIONS & ANIMATION ---------------------------------------------------------- */ --hv-ease: cubic-bezier(0.16, 1, 0.3, 1); --hv-ease-in: cubic-bezier(0.55, 0, 1, 0.45); --hv-ease-out: cubic-bezier(0, 0.55, 0.45, 1); --hv-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --hv-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); --hv-duration-fast: 150ms; --hv-duration: 300ms; --hv-duration-slow: 600ms; --hv-duration-slower: 1000ms; --hv-duration-crawl: 1800ms; /* ---------------------------------------------------------- SHADOWS — Card Elevation ---------------------------------------------------------- */ --hv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15); --hv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --hv-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25); --hv-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); --hv-shadow-gold: 0 4px 20px rgba(255, 215, 0, 0.15), 0 2px 8px rgba(255, 215, 0, 0.1); --hv-shadow-gold-lg: 0 8px 40px rgba(255, 215, 0, 0.2), 0 4px 16px rgba(255, 215, 0, 0.15); --hv-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* ---------------------------------------------------------- GLASS MORPHISM ---------------------------------------------------------- */ --hv-glass-bg: rgba(17, 17, 17, 0.6); --hv-glass-blur: 20px; --hv-glass-border: rgba(255, 255, 255, 0.06); --hv-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* ============================================================ BREAKPOINTS (reference only — use in @media queries) Mobile: < 768px (default / mobile-first) Tablet: >= 768px @media (min-width: 768px) Desktop: >= 1024px @media (min-width: 1024px) Large: >= 1280px @media (min-width: 1280px) XLarge: >= 1440px @media (min-width: 1440px) XXLarge: >= 1920px @media (min-width: 1920px) ============================================================ */