:root { --ds-type-scale: 1; --ds-space-scale: 1; --ds-radius-scale: 1; --ds-border-width: 1px; --ds-border-strong-width: 2px; --ds-glow-strength: 1; --ds-font-display: 'Cinzel', 'Times New Roman', serif; --ds-font-body: 'Cormorant Garamond', Georgia, serif; --ds-font-label: 'Press Start 2P', sans-serif; --ds-font-number: 'Cinzel', 'Times New Roman', serif; /* ─── Cosmic Core Palette — UI Surfaces & Neutrals ─── */ --ds-color-bg-deep: #060A16; /* Deep Space */ --ds-color-bg-mid: #0D1324; /* Void Surface */ --ds-color-bg-surface: #141A2E; /* Panel Surface */ --ds-color-bg-raised: #1D2438; /* Elevated Surface */ --ds-color-bg-soft: rgba(20, 26, 46, 0.84); --ds-color-bg-scrim: rgba(6, 10, 22, 0.78); /* Text */ --ds-color-text-primary: #F2F4F7; --ds-color-text-secondary: #9BA5C1; --ds-color-text-muted: rgba(155, 165, 193, 0.72); --ds-color-text-gold: #FFE08A; /* Gold tint, used as text-on-dark */ --ds-color-text-danger: #FF8A9F; --ds-color-text-success: #6BFFD2; /* Named accents — base value is the Cosmic Core hex */ --ds-color-accent-gold: #D4AF37; /* Aureus Gold */ --ds-color-accent-amber: #7A5A12; /* Gold deep shade */ --ds-color-accent-blue: #1A4CDD; /* Celestial Blue */ --ds-color-accent-cyan: #66B2FF; /* Blue glow */ --ds-color-accent-violet: #A136FF; /* Astral Violet */ --ds-color-accent-emerald: #0ED9B2; /* Nebula Emerald */ --ds-color-accent-crimson: #E02050; /* Crimson Danger */ /* ─── FINAL gradient breakdown — 4 stops per accent (0% → 100%) ─── */ /* Gold */ --ds-color-gold-0: #FFD37A; --ds-color-gold-30: #FFA940; --ds-color-gold-60: #B97714; --ds-color-gold-100: #1A1206; /* Blue */ --ds-color-blue-0: #6EA8FF; --ds-color-blue-30: #3B6FCB; --ds-color-blue-60: #1A2A5E; --ds-color-blue-100: #070B1A; /* Violet */ --ds-color-violet-0: #B07CFF; --ds-color-violet-30: #7A4DFF; --ds-color-violet-60: #3B1E6B; --ds-color-violet-100: #0B061A; /* Emerald */ --ds-color-emerald-0: #4DFFB5; --ds-color-emerald-30: #1ABF9C; --ds-color-emerald-60: #0B6B63; --ds-color-emerald-100: #051513; /* Danger */ --ds-color-danger-0: #FF6B7D; --ds-color-danger-30: #E63950; --ds-color-danger-60: #8A1C2C; --ds-color-danger-100: #12060A; /* Panel */ --ds-color-panel-0: #5B6380; --ds-color-panel-30: #3A3F5C; --ds-color-panel-60: #1B1F2E; --ds-color-panel-100: #090B12; /* Hover / Glow states */ --ds-color-glow-gold: #FFD700; --ds-color-glow-blue: #66B2FF; --ds-color-glow-violet: #C77DFF; --ds-color-glow-emerald: #3FFFE0; --ds-color-glow-danger: #FF6881; --ds-color-glow-panel: #2A3555; --ds-color-slot-base: linear-gradient(135deg, #FFE08A, #D4AF37); --ds-color-slot-positive: linear-gradient(135deg, #6BFFD2, #19D3A2); --ds-color-slot-negative: linear-gradient(135deg, #FF8A9F, #FF4D6D); /* Border accent: #2E3550 from the Cosmic palette neutrals strip */ --ds-color-border-soft: rgba(46, 53, 80, 0.7); --ds-color-border-base: rgba(212, 175, 55, 0.48); /* Aureus Gold @ 48 */ --ds-color-border-strong: rgba(255, 215, 0, 0.88); /* Gold Glow @ 88 */ --ds-color-contour: rgba(255, 224, 138, 0.22); --ds-color-selected: #FFD700; /* Gold Glow */ --ds-color-disabled: rgba(110, 123, 156, 0.54); --ds-color-success: #0ED9B2; /* Nebula Emerald */ --ds-color-warning: #FFD700; /* Gold Glow */ --ds-color-danger: #E02050; /* Crimson Danger */ --ds-space-1: calc(4px * var(--ds-space-scale)); --ds-space-2: calc(8px * var(--ds-space-scale)); --ds-space-3: calc(12px * var(--ds-space-scale)); --ds-space-4: calc(16px * var(--ds-space-scale)); --ds-space-5: calc(24px * var(--ds-space-scale)); --ds-space-6: calc(32px * var(--ds-space-scale)); --ds-radius-xs: calc(8px * var(--ds-radius-scale)); --ds-radius-sm: calc(12px * var(--ds-radius-scale)); --ds-radius-md: calc(16px * var(--ds-radius-scale)); --ds-radius-lg: calc(22px * var(--ds-radius-scale)); --ds-radius-xl: calc(28px * var(--ds-radius-scale)); --ds-radius-pill: 999px; /* Surfaces composed from the new neutrals + tinted accent washes */ --ds-surface-body: radial-gradient(circle at 50% 0%, rgba(161, 54, 255, 0.12), transparent 26%), radial-gradient(circle at 0% 100%, rgba(26, 76, 221, 0.16), transparent 34%), linear-gradient(180deg, #0D1324 0%, #060A16 100%); --ds-surface-panel: linear-gradient(180deg, #141A2E 0%, #060A16 100%); --ds-surface-panel-ornate: radial-gradient(circle at 50% 0%, rgba(255, 224, 138, 0.08), transparent 26%), linear-gradient(180deg, #1D2438 0%, #0D1324 100%); --ds-surface-panel-modal: linear-gradient(180deg, #141A2E 0%, #060A16 100%); --ds-surface-card: linear-gradient(180deg, #1D2438 0%, #0D1324 100%); --ds-surface-card-selected: linear-gradient(180deg, rgba(212, 175, 55, 0.32) 0%, rgba(122, 90, 18, 0.42) 100%); --ds-surface-rail: linear-gradient(180deg, #1D2438 0%, #0D1324 100%); --ds-surface-badge: linear-gradient(180deg, #FFE08A 0%, #D4AF37 60%, #7A5A12 100%); --ds-surface-pill: linear-gradient(180deg, #1D2438 0%, #0D1324 100%); --ds-surface-button-primary: linear-gradient(180deg, #FFE08A 0%, #D4AF37 60%, #7A5A12 100%); --ds-surface-button-secondary: linear-gradient(180deg, #1D2438 0%, #0D1324 100%); --ds-surface-button-ghost: rgba(13, 19, 36, 0.32); --ds-surface-button-danger: linear-gradient(180deg, #FF4D6D 0%, #5A0D1A 100%); /* Tinted shadows — every glow ring uses the corresponding hover/glow hex so the rim picks up its own family. */ --ds-shadow-panel: 0 18px 48px rgba(6, 10, 22, 0.46), 0 8px 18px rgba(122, 90, 18, 0.18), inset 0 0 0 1px rgba(255, 224, 138, 0.06); --ds-shadow-soft: 0 10px 24px rgba(6, 10, 22, 0.32), 0 2px 6px rgba(46, 53, 80, 0.18); --ds-shadow-selected: 0 0 calc(18px * var(--ds-glow-strength)) rgba(255, 215, 0, 0.42), 0 6px 18px rgba(122, 90, 18, 0.32); --ds-shadow-accent: 0 0 calc(22px * var(--ds-glow-strength)) rgba(102, 178, 255, 0.42), 0 8px 18px rgba(14, 26, 58, 0.36); --ds-shadow-violet: 0 0 calc(22px * var(--ds-glow-strength)) rgba(199, 125, 255, 0.42), 0 8px 18px rgba(40, 21, 78, 0.36); --ds-shadow-emerald: 0 0 calc(22px * var(--ds-glow-strength)) rgba(63, 255, 224, 0.42), 0 8px 18px rgba(8, 46, 40, 0.36); --ds-shadow-danger: 0 0 calc(18px * var(--ds-glow-strength)) rgba(255, 104, 129, 0.46), 0 8px 18px rgba(90, 13, 26, 0.4); --ds-shadow-cosmic: 0 0 calc(32px * var(--ds-glow-strength)) rgba(161, 54, 255, 0.28), 0 0 calc(64px * var(--ds-glow-strength)) rgba(26, 76, 221, 0.18); --ds-shadow-inset-glow: inset 0 1px 0 rgba(255, 224, 138, 0.08), inset 0 -1px 0 rgba(6, 10, 22, 0.42); --ds-motion-fast: 140ms; --ds-motion-base: 220ms; --ds-motion-slow: 420ms; --ds-motion-veil: 720ms; /* Canonical easing curves — keep these few. Pick by intent, not by feel. */ --ds-ease-rise: cubic-bezier(0.16, 0.84, 0.32, 1); /* enter, settle */ --ds-ease-fall: cubic-bezier(0.5, 0, 0.84, 0.4); /* exit, dismiss */ --ds-ease-pulse: cubic-bezier(0.4, 0, 0.6, 1); /* attention, breathe */ --ds-ease-snap: cubic-bezier(0.7, 0, 0.3, 1); /* tactile, button press */ --ds-letter-label: 0.12em; --ds-letter-title: 0.06em; /* Inner-contour tokens — used by .ds-panel::before and the legacy overlays.css. The 9-slice ornament block was removed; what remains is only the contour offset/color and a fill the live game still references. */ --ds-9s-fill: rgba(8, 13, 26, 0.92); --ds-9s-contour-offset: 6px; --ds-9s-contour-color: rgba(255, 243, 211, 0.12); /* Button sizing */ --ds-button-min-h: 42px; --ds-button-min-h-lg: 52px; /* Cosmic section spacing */ --ds-section-gap: var(--ds-space-3); --ds-section-pad: var(--ds-space-4); --ds-panel-pad: var(--ds-space-5); /* Page rhythm — outer breathing on the design-system surface and live screens */ --ds-rhythm-page-pad: clamp(20px, 3.2vw, 48px); --ds-rhythm-section-gap: clamp(28px, 3.4vw, 56px); --ds-rhythm-stack-gap: clamp(14px, 1.6vw, 24px); /* Seal — corner stamp for NEW!, owned, just-unlocked */ --ds-seal-size: 32px; --ds-seal-offset: -10px; --ds-seal-bg: var(--ds-surface-badge); --ds-seal-text: #2A1A04; --ds-seal-border: rgba(255, 224, 138, 0.78); --ds-seal-shadow: 0 4px 14px rgba(6, 10, 22, 0.46), 0 0 12px rgba(255, 215, 0, 0.5); /* Accordion timing */ --ds-accordion-duration: var(--ds-motion-base); }