/* ============================================================ LAIND — Design Tokens (variables.css) Complete token system: colors, typography, spacing, shadows, transitions, border-radius. Dark mode first (brand identity). Premium Gold & Silver palette — luxury aesthetic. ============================================================ */ :root { /* ── Brand Palette ── */ --color-primary-dark: #0c0a09; /* Deep warm black */ --color-secondary: #a8a29e; /* Warm stone */ --color-accent: #d4a853; /* Premium champagne gold */ --color-accent-hover: #e8c46e; /* Lighter gold on hover */ --color-accent-deep: #b8922e; /* Deeper gold for pressed */ --color-accent-rgb: 212, 168, 83; /* For rgba usage */ --color-accent-glow: rgba(212, 168, 83, 0.4); --color-whatsapp: #25d366; /* WhatsApp green */ --color-whatsapp-hover: #22c55e; --color-whatsapp-rgb: 37, 211, 102; /* ── Silver / Platinum accent (secondary highlights) ── */ --color-silver: #c0c0c0; --color-silver-light: #d9d9d9; --color-silver-rgb: 192, 192, 192; /* ── Warm accent (premium gold highlights) ── */ --color-warm: #d4a853; --color-warm-rgb: 212, 168, 83; /* ── Rose Gold accent ── */ --color-rose-gold: #b87d5b; --color-rose-gold-rgb: 184, 125, 91; /* ── Dark Mode Surfaces ── */ --color-bg: #08080a; /* True deep black */ --color-surface-1: #0f0e0d; /* Card / panel base — warm tint */ --color-surface-2: #171614; /* Elevated surface */ --color-surface-3: #1e1d1a; /* Highest elevation */ --color-border: rgba(212, 168, 83, 0.06); --color-border-hover: rgba(212, 168, 83, 0.14); --color-border-accent: rgba(212, 168, 83, 0.3); /* ── Text ── */ --color-text: #f5f0e8; /* Warm white — parchment */ --color-text-secondary: #a8a29e; /* Stone-400 */ --color-text-muted: #78716c; /* Stone-500 */ /* ── Semantic / Feedback ── */ --color-success: #22c55e; --color-error: #ef4444; --color-warning: #f59e0b; --color-info: #3b82f6; /* ── Gradients ── */ --gradient-hero: linear-gradient( 135deg, #08080a 0%, #0d0c08 20%, #12100a 40%, #1a150c 60%, #12100a 80%, #08080a 100% ); --gradient-accent: linear-gradient(135deg, #b8922e 0%, #d4a853 40%, #e8c46e 70%, #d4a853 100%); --gradient-accent-vibrant: linear-gradient(135deg, #d4a853 0%, #b87d5b 100%); --gradient-card: linear-gradient( 160deg, rgba(212, 168, 83, 0.04) 0%, rgba(192, 192, 192, 0.02) 50%, rgba(212, 168, 83, 0.01) 100% ); --gradient-glow: radial-gradient( ellipse at 50% 0%, rgba(212, 168, 83, 0.14) 0%, rgba(184, 125, 91, 0.07) 30%, transparent 70% ); --gradient-section-alt: linear-gradient( 180deg, var(--color-surface-1) 0%, var(--color-bg) 100% ); --gradient-mesh: radial-gradient( at 27% 37%, rgba(212, 168, 83, 0.07) 0%, transparent 50% ), radial-gradient( at 97% 21%, rgba(184, 125, 91, 0.05) 0%, transparent 50% ), radial-gradient( at 52% 99%, rgba(192, 192, 192, 0.03) 0%, transparent 50% ); --gradient-border: linear-gradient( 135deg, rgba(212, 168, 83, 0.5) 0%, rgba(192, 192, 192, 0.2) 50%, rgba(212, 168, 83, 0.5) 100% ); /* ── Premium metallic shimmer ── */ --gradient-gold-shimmer: linear-gradient( 105deg, transparent 35%, rgba(232, 196, 110, 0.2) 45%, rgba(255, 223, 140, 0.3) 50%, rgba(232, 196, 110, 0.2) 55%, transparent 65% ); --gradient-silver-shimmer: linear-gradient( 105deg, transparent 35%, rgba(192, 192, 192, 0.15) 45%, rgba(217, 217, 217, 0.25) 50%, rgba(192, 192, 192, 0.15) 55%, transparent 65% ); /* ── Typography ── */ --font-display: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Modular scale (Major Third 1.25) */ --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 */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-widest: 0.1em; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Spacing (4px base grid) ── */ --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-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ /* ── Border Radius ── */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-full: 9999px; /* ── Shadows (Layered depth system for dark mode) ── */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(212, 168, 83, 0.02) inset; --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.18), 0 16px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(212, 168, 83, 0.03) inset; --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.2), 0 32px 64px rgba(0, 0, 0, 0.12); --shadow-5: 0 20px 40px rgba(0, 0, 0, 0.3), 0 40px 80px rgba(0, 0, 0, 0.2); --shadow-glow: 0 0 20px rgba(var(--color-accent-rgb), 0.2), 0 0 60px rgba(var(--color-accent-rgb), 0.12), 0 0 100px rgba(var(--color-accent-rgb), 0.06); --shadow-glow-sm: 0 0 10px rgba(var(--color-accent-rgb), 0.18), 0 0 30px rgba(var(--color-accent-rgb), 0.08); --shadow-glow-btn: 0 4px 15px rgba(var(--color-accent-rgb), 0.35), 0 0 30px rgba(var(--color-accent-rgb), 0.15); /* ── Transitions ── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 150ms var(--ease-default); --transition-base: 280ms var(--ease-default); --transition-slow: 500ms var(--ease-default); --transition-spring: 600ms var(--ease-spring); /* ── Semantic Colors (derived) ── */ --color-btn-dark: #0a0a0a; /* ── Z-Index Scale ── */ --z-header: 1000; --z-dock: 950; --z-whatsapp: 900; --z-cookie: 9000; --z-toast: 9999; /* ── Layout ── */ --container-max: 1200px; --container-padding: clamp(1.25rem, 5vw, 2.5rem); --header-height: 72px; --hero-fade-height: 120px; /* ── Shared Effects ── */ --backdrop-blur-heavy: blur(24px) saturate(180%); --gradient-fade-bg: linear-gradient(to bottom, transparent, var(--color-bg)); --handoff-duration: 0.3s; /* ── Breakpoints (as reference, used in media queries) ── Mobile: 480px Tablet: 768px Desktop: 1024px Wide: 1280px ── */ }