/** * Lumenoid Design Tokens * All visual decisions live here. Retheme by editing this file only. */ :root { /* ─── Color ─── */ /* Base surfaces */ --color-bg: #ffffff; --color-bg-subtle: #f7f7f9; --color-bg-muted: #f0f0f4; --color-surface: #ffffff; --color-surface-raised: #f7f7f9; /* Dark surfaces */ --color-bg-dark: #0c0c14; --color-bg-dark-2: #13131f; --color-bg-dark-3: #1a1a2e; /* Text */ --color-text: #0c0c14; --color-text-muted: #6b6b80; --color-text-subtle: #9898a8; --color-text-inverse: #ffffff; --color-text-inverse-muted: rgba(255,255,255,0.55); /* Brand gradient — the primary accent */ --color-accent-1: #6c3de8; /* violet */ --color-accent-2: #c43dd4; /* magenta */ --color-accent-3: #f04f6e; /* coral */ --color-accent-4: #f97316; /* orange */ /* Product colours */ --color-hungry: #f97316; --color-sehat: #0ea5e9; --color-innkeep: #8b5cf6; /* Borders */ --color-border: #e4e4ec; --color-border-muted: #f0f0f4; --color-border-dark: rgba(255,255,255,0.1); /* Semantic */ --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; /* Gradient definitions */ --gradient-brand: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3), var(--color-accent-4)); --gradient-brand-h: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3), var(--color-accent-4)); --gradient-dark: linear-gradient(160deg, var(--color-bg-dark) 0%, #160b38 100%); --gradient-text: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 50%, var(--color-accent-3) 100%); /* Section art — full-bleed background plates (16:9, white-ground) */ --art-hero: url('/assets/images/art/art-iridescent-ribbon.webp'); --art-teal: url('/assets/images/art/art-teal-wave.webp'); --art-purple: url('/assets/images/art/art-violet-swirl.webp'); --art-warm: url('/assets/images/art/art-spectrum-wave.webp'); --art-fade: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 34%, rgba(255,255,255,0.72) 52%, rgba(255,255,255,0) 72%); --art-fade-r: linear-gradient(270deg, var(--color-bg) 0%, var(--color-bg) 34%, rgba(255,255,255,0.72) 52%, rgba(255,255,255,0) 72%); /* Card gradients — very light washes sampled from the sculpture palette */ --grad-1: linear-gradient(145deg, #ffffff 0%, #f6f1ff 55%, #efe7ff 100%); /* violet haze */ --grad-2: linear-gradient(145deg, #ffffff 0%, #fdf0fb 55%, #f9e6f7 100%); /* magenta mist */ --grad-3: linear-gradient(145deg, #ffffff 0%, #fff2f4 55%, #ffe8ec 100%); /* coral blush */ --grad-4: linear-gradient(145deg, #ffffff 0%, #fff6ee 55%, #ffeedf 100%); /* orange glow */ --grad-5: linear-gradient(145deg, #ffffff 0%, #eefbf8 55%, #e2f7f2 100%); /* teal dew */ --grad-6: linear-gradient(145deg, #ffffff 0%, #eff8fe 55%, #e3f2fd 100%); /* sky */ --grad-7: linear-gradient(145deg, #fbf8ff 0%, #fdf3fa 50%, #fff4ec 100%); /* iridescent: violet → pink → peach */ --grad-8: linear-gradient(145deg, #f3fbfa 0%, #f2f5ff 50%, #f8f1ff 100%); /* iridescent: teal → blue → lilac */ /* Glass */ --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-bg-dark: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.7); --glass-border-dark: rgba(255, 255, 255, 0.14); --glass-blur: blur(22px) saturate(1.6); --glass-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 20px 50px -24px rgba(60, 30, 120, 0.28); /* Nested glass frame — thin inner edge, translucent band, thin outer edge (pure box-shadow, no extra markup) */ --frame-gap: 8px; --glass-frame: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 var(--frame-gap) rgba(255, 255, 255, 0.38), 0 0 0 calc(var(--frame-gap) + 1px) rgba(255, 255, 255, 0.9), 0 0 0 calc(var(--frame-gap) + 2px) rgba(108, 61, 232, 0.06), 0 30px 60px -28px rgba(60, 30, 120, 0.25); /* Ambient blobs */ --blob-1: rgba(139, 92, 246, 0.20); /* violet */ --blob-2: rgba(236, 72, 153, 0.14); /* pink */ --blob-3: rgba(20, 184, 166, 0.14); /* teal */ --blob-4: rgba(56, 189, 248, 0.14); /* sky */ /* Soft tinted surfaces for icon chips */ --tint-violet: #f1ebff; --tint-teal: #e3f8f4; --tint-coral: #ffe9ee; --tint-orange: #fff1e6; --tint-sky: #e6f5fd; /* ─── Typography ─── */ --font-display: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-logo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-accent: 'Caveat', cursive; /* Scale — fluid clamp values, no breakpoint juggling */ --text-xs: clamp(0.7rem, 0.6vw + 0.5rem, 0.75rem); --text-sm: clamp(0.825rem, 0.7vw + 0.6rem, 0.9375rem); --text-base: clamp(1rem, 0.8vw + 0.75rem, 1.125rem); --text-lg: clamp(1.125rem, 1vw + 0.85rem, 1.375rem); --text-xl: clamp(1.25rem, 1.5vw + 0.9rem, 1.75rem); --text-2xl: clamp(1.5rem, 2vw + 1rem, 2.25rem); --text-3xl: clamp(1.875rem, 3vw + 1rem, 3rem); --text-4xl: clamp(2.5rem, 4.5vw + 1rem, 4.25rem); --text-5xl: clamp(3rem, 6.5vw + 1rem, 5.75rem); --text-6xl: clamp(3.5rem, 8vw + 1rem, 7rem); /* Line heights */ --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Tracking */ --tracking-tight: -0.04em; --tracking-snug: -0.02em; --tracking-normal: -0.01em; --tracking-wide: 0.05em; --tracking-widest: 0.14em; /* ─── Spacing ─── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Section rhythm — scales with viewport */ --section-y: clamp(4rem, 10vw, 8rem); /* ─── Layout ─── */ --container-max: 1200px; --container-pad: clamp(1.25rem, 5vw, 4rem); --gutter: clamp(1rem, 2vw, 1.5rem); /* ─── Radius ─── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 9999px; /* ─── Shadows ─── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 40px rgba(0,0,0,0.10); --shadow-card: 0 0 0 1px var(--color-border), 0 2px 8px rgba(0,0,0,0.05); --shadow-float: 0 30px 60px -20px rgba(40,20,90,0.25), 0 8px 20px -8px rgba(40,20,90,0.12); --shadow-brand: 0 8px 28px rgba(108,61,232,0.22); /* ─── Motion ─── */ --duration-fast: 140ms; --duration-normal: 260ms; --duration-slow: 480ms; --duration-crawl: 700ms; --reveal-distance: 36px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* ─── Z-index ─── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; } /* Reduced motion — zero-out all durations */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-crawl: 0ms; } }