/* ========================================================================== Y1 Game — in-y1.games assets/css/tokens.css — the single source of truth for the visual system. THEME: "THE JADE VAULT" Palette: Emerald (energy) + Brass (metallic trim) on a cool, green-leaning near-black. Built to read like a vault door: heavy dark mass, thin metal framing, and one live green light. THE 70 / 20 / 10 RATIO — obey it everywhere: 70% SURFACES — near-black grounds, glass panels, hairline separations. This is the page. It should feel almost monochrome. 20% BRASS — borders, rules, eyebrows, numerals, small type accents, the foil shimmer. Brass FRAMES. It never shouts. 10% EMERALD — primary CTAs, active states, live indicators, glows. Emerald IGNITES. It marks the one thing to do next. The two accents never appear inside a single element. A brass-bordered card may contain an emerald button; a button is never brass AND emerald at once. ========================================================================== */ :root { /* ---------------------------------------------------------------- SURFACES */ --color-bg: #07090A; --color-bg-deep: #040607; --color-bg-raise: #0B0F11; --color-surface: #101618; --color-surface-2: #161E21; --color-surface-glass: rgba(16, 22, 24, 0.62); --color-surface-glass-strong: rgba(11, 15, 17, 0.88); /* ------------------------------------------------- METALLIC TRIM — BRASS */ --color-brass: #B98A44; --color-brass-bright: #E8C57E; --color-brass-deep: #7A5A26; --color-brass-wash: rgba(185, 138, 68, 0.10); --color-brass-foil: linear-gradient( 120deg, #7A5A26 0%, #DDBA76 45%, #F2DCA8 55%, #7A5A26 100% ); /* ------------------------------------------------ ENERGY ACCENT — EMERALD */ --color-emerald: #0E8A5F; --color-emerald-bright: #1FD98E; --color-emerald-deep: #064F36; --color-emerald-wash: rgba(31, 217, 142, 0.12); /* ----------------------------------------------------------------- BORDERS */ --color-border: rgba(185, 138, 68, 0.20); --color-border-soft: rgba(185, 138, 68, 0.11); --color-border-strong: rgba(232, 197, 126, 0.38); /* -------------------------------------------------------------------- TEXT */ --color-text-primary: #F4F1E9; --color-text-muted: #A9B0AD; --color-text-dim: #6E7874; --color-text-on-brass: #120C03; --color-text-on-emerald: #02150E; /* ---------------------------------------------------------------- FEEDBACK */ --color-success: #1FD98E; --color-error: #F0655C; --color-warn: #E8B14B; /* ------------------------------------------------------ SIGNATURE GRADIENTS */ --gradient-hero: radial-gradient(1100px 620px at 78% -8%, rgba(31, 217, 142, 0.13), transparent 62%), radial-gradient(900px 560px at 6% 12%, rgba(185, 138, 68, 0.11), transparent 66%), linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-bg) 58%); --gradient-panel: linear-gradient( 168deg, rgba(22, 30, 33, 0.94) 0%, rgba(11, 15, 17, 0.92) 100% ); --gradient-emerald: linear-gradient(135deg, #0E8A5F 0%, #1FD98E 100%); --gradient-brass-line: linear-gradient( 90deg, transparent 0%, rgba(185, 138, 68, 0.05) 18%, var(--color-brass-bright) 50%, rgba(185, 138, 68, 0.05) 82%, transparent 100% ); --gradient-vault: radial-gradient( 120% 68% at 50% 0%, rgba(31, 217, 142, 0.10) 0%, rgba(185, 138, 68, 0.05) 34%, transparent 72% ); /* ----------------------------------------------------------------- SHADOWS */ --shadow-glow-emerald: 0 0 0 1px rgba(31, 217, 142, 0.30), 0 14px 44px -14px rgba(14, 138, 95, 0.62); --shadow-glow-brass: 0 0 0 1px rgba(232, 197, 126, 0.28), 0 14px 40px -16px rgba(185, 138, 68, 0.50); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.44); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.52); --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.60); --shadow-card: 0 28px 66px -26px rgba(0, 0, 0, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.045); /* -------------------------------------------------------------- TYPOGRAPHY */ --font-display: 'Y1 Display', 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Y1 Body', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --fs-sm: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem); --fs-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.04rem); --fs-md: clamp(1.05rem, 1.00rem + 0.26vw, 1.18rem); --fs-lg: clamp(1.20rem, 1.11rem + 0.42vw, 1.42rem); --fs-xl: clamp(1.42rem, 1.28rem + 0.66vw, 1.82rem); --fs-2xl: clamp(1.70rem, 1.48rem + 1.02vw, 2.34rem); --fs-3xl: clamp(2.05rem, 1.70rem + 1.60vw, 3.05rem); --fs-4xl: clamp(2.45rem, 1.92rem + 2.35vw, 3.95rem); --fs-5xl: clamp(2.90rem, 2.10rem + 3.40vw, 5.05rem); --fs-hero: clamp(2.60rem, 1.70rem + 4.30vw, 5.80rem); --lh-tight: 1.04; --lh-snug: 1.22; --lh-normal: 1.55; --lh-relaxed: 1.78; --ls-tight: -0.024em; --ls-label: 0.02em; --ls-wide: 0.20em; /* ----------------------------------------------------------------- SPACING */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 28px; --sp-7: 36px; --sp-8: 44px; --sp-9: 56px; --sp-10: 68px; --sp-11: 82px; --sp-12: 96px; --sp-13: 108px; --sp-14: 120px; --section-y: clamp(56px, 7vw, 104px); --section-y-lg: clamp(72px, 9vw, 140px); --stack: clamp(20px, 2.4vw, 34px); /* ------------------------------------------------------------------ LAYOUT */ --container: 1220px; --container-narrow: 900px; --container-wide: 1440px; --gutter: clamp(20px, 5vw, 76px); --header-h: 84px; --header-h-condensed: 66px; --slant: 3.2vw; /* ------------------------------------------------------------------- RADII */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* ------------------------------------------------------------------ MOTION */ --ease-out: cubic-bezier(0.22, 0.68, 0.24, 1); --ease-in-out: cubic-bezier(0.62, 0.02, 0.30, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.44, 1); --t-fast: 160ms; --t-base: 280ms; --t-slow: 520ms; --t-reveal: 760ms; /* ---------------------------------------------------------------- Z-LADDER */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-float: 400; --z-modal: 500; --z-toast: 600; --z-preloader: 700; } /* -------------------------------------------------------------------------- Very small handsets — buy back horizontal room and vertical chrome. -------------------------------------------------------------------------- */ @media (max-width: 360px) { :root { --gutter: 14px; --header-h: 62px; --header-h-condensed: 56px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; } } /* -------------------------------------------------------------------------- Reduced motion — collapse every duration token. Components read these, so this single block neutralises transitions and animations site-wide. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-reveal: 1ms; } }