/* ========================================================================== Y1 Game — Design tokens (dark) The single source of truth for colour, type, space, motion and elevation. Nothing below this file should hard-code a hex value or a raw duration. The site runs one theme: obsidian ground, champagne-gold hairlines, ruby for action. Surfaces are warm blacks rather than neutral greys — that warmth is what keeps it reading as a lounge instead of a dashboard. ========================================================================== */ :root { color-scheme: dark; /* --------------------------------------------------------------------- 01 · Brand palette --------------------------------------------------------------------- */ --ivory: #F7F2E9; --champagne: #F0E4CE; --gold-soft: #F7E7CE; --gold: #D4AF37; --gold-bright: #EFD07A; --gold-deep: #A88424; --ruby: #9B111E; --ruby-bright: #C41E3A; --ruby-deep: #6E0B14; --obsidian: #0D0D0D; --charcoal: #4A4644; /* --------------------------------------------------------------------- 02 · Semantic surfaces & ink Five steps of elevation, each a shade warmer than neutral black. --------------------------------------------------------------------- */ --surface-base: #080807; /* page ground */ --surface: #0C0B0A; /* default section */ --surface-tint: #16120F; /* alternating "tinted" section */ --surface-lift: #1B1714; /* cards, panels */ --surface-lift-2: #241F1B; /* hovered card, input focus */ --surface-deep: #050505; /* footer, deepest bands */ --surface-glass: rgba(255, 255, 255, 0.045); --surface-glass-2: rgba(255, 255, 255, 0.028); --ink: #F6F1E8; --ink-muted: rgba(246, 241, 232, 0.70); --ink-soft: rgba(246, 241, 232, 0.46); --ink-faint: rgba(246, 241, 232, 0.30); --ink-invert: #0B0A09; /* type sitting on gold */ /* --------------------------------------------------------------------- 03 · Lines — the hairline system that defines the whole look Dark grounds need more alpha than light ones to read as a line. --------------------------------------------------------------------- */ --line-gold: rgba(212, 175, 55, 0.34); --line-gold-strong: rgba(212, 175, 55, 0.78); --line-gold-faint: rgba(212, 175, 55, 0.16); --line-ink: rgba(255, 255, 255, 0.09); --line-ink-soft: rgba(255, 255, 255, 0.055); --line-invert: rgba(255, 255, 255, 0.12); /* Reusable gold gradient rule */ --rule-gold: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.55) 18%, rgba(212, 175, 55, 0.9) 50%, rgba(212, 175, 55, 0.55) 82%, rgba(212, 175, 55, 0) 100%); --gold-plate: linear-gradient(135deg, #B98F2A 0%, #E7CE76 24%, #D4AF37 48%, #F3E3AE 68%, #B98F2A 100%); --ruby-plate: linear-gradient(135deg, #A5121F 0%, #C41E3A 45%, #7E0C18 100%); /* Atmospheric washes layered behind sections */ --wash-ruby: radial-gradient(760px 460px at 12% 6%, rgba(155, 17, 30, 0.30), transparent 62%); --wash-gold: radial-gradient(820px 520px at 86% 12%, rgba(212, 175, 55, 0.14), transparent 64%); /* --------------------------------------------------------------------- 04 · Typography --------------------------------------------------------------------- */ --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-label: 'Cinzel', 'Cormorant Garamond', Georgia, serif; --font-body: 'Manrope', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* Fluid type scale — clamp(min, preferred, max) */ --fs-mega: clamp(3.1rem, 1.6rem + 6.6vw, 7.5rem); --fs-h1: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem); --fs-h2: clamp(2.1rem, 1.35rem + 3vw, 3.9rem); --fs-h3: clamp(1.5rem, 1.15rem + 1.4vw, 2.3rem); --fs-h4: clamp(1.18rem, 1.02rem + 0.6vw, 1.5rem); --fs-lead: clamp(1.06rem, 0.98rem + 0.42vw, 1.32rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-label: 0.72rem; --ls-label: 0.28em; --ls-tight: -0.02em; /* --------------------------------------------------------------------- 05 · Space & measure --------------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem; --sp-9: 5rem; --sp-10: 7rem; --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem); --shell: 1280px; --shell-narrow: 900px; --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 3.25rem); /* --------------------------------------------------------------------- 06 · Radii & elevation On dark, depth comes from light (inner top highlights, gold rims) as much as from shadow. --------------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 10px 26px -14px rgba(0, 0, 0, 0.8); --shadow-md: 0 24px 50px -26px rgba(0, 0, 0, 0.9); --shadow-lg: 0 46px 90px -44px rgba(0, 0, 0, 0.95); --shadow-ruby: 0 20px 44px -18px rgba(155, 17, 30, 0.72); --shadow-gold: 0 22px 48px -22px rgba(168, 132, 36, 0.6); --glow-gold: 0 0 0 1px var(--line-gold), 0 24px 64px -30px rgba(212, 175, 55, 0.5); /* --------------------------------------------------------------------- 07 · Motion --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 180ms; --t-base: 320ms; --t-slow: 620ms; --t-reveal: 900ms; /* --------------------------------------------------------------------- 08 · Layers --------------------------------------------------------------------- */ --z-base: 1; --z-rails: 2; --z-sticky: 60; --z-header: 70; --z-drawer: 80; --z-bar: 75; --z-modal: 90; --z-loader: 100; }