/* ============================================================================ Nexian Global — Design Tokens (Single Source of Truth) ---------------------------------------------------------------------------- Every color / font / shadow / radius / motion value used across the external shell is declared here as a CSS custom property. Components reference these tokens by name — never raw hex. ============================================================================ */ :root { /* --- Brand palette (Gold spine) --------------------------------------- */ --gold-100: #FFEE99; /* Brightest highlight (titles, shimmer peak) */ --gold-200: #F4E287; /* Light gold (gradient stops, hover) */ --gold-300: #E6C347; /* Mid-bright (hover button fill) */ --gold-400: #D4AF37; /* PRIMARY brand gold */ --gold-500: #C9A227; /* Deeper (gradient bottom, active border) */ --gold-600: #A8891A; /* Dark gold (icon details, brow ridge) */ --gold-700: #6B5A12; /* Deepest (helmet body shadow) */ --gold-rgb: 212, 175, 55; /* For rgba() composition */ /* --- Accent palette --------------------------------------------------- */ --amber: #FFB800; --amber-soft: #F59E0B; --crimson: #FF4D4D; --crimson-soft: #EF4444; --ember: #FB923C; --teuton-red: #F87171; --gaul-green: #34D399; --online-green: #34D399; --discord: #5865F2; --discord-soft: #7289DA; /* --- Tribe accents (kept distinct from generic accents) --------------- */ --tribe-roman: var(--gold-400); --tribe-teuton: #F87171; --tribe-gaul: #34D399; --tribe-natar: #8B5CF6; /* --- Surface / background -------------------------------------------- */ --bg-deep: #050402; /* Page background base */ --bg-base: #0A0703; /* Main background */ --bg-elev-1: #14100A; /* Card / surface level 1 */ --bg-elev-2: #1C1810; /* Modal / surface level 2 */ --bg-glass: rgba(15, 12, 6, 0.88); /* Glass panel (over background) */ --bg-glass-soft:rgba(10, 7, 3, 0.55); /* Lighter glass (footer) */ /* --- Text -------------------------------------------------------------*/ --text-100: #FFFFFF; /* Highest emphasis (titles) */ --text-200: #E5E7EB; /* High emphasis (body white) */ --text-300: #D1D5DB; /* Default body */ --text-400: #A9B0BC; /* Secondary */ --text-500: #8B92A0; /* Tertiary / disabled */ --text-muted: rgba(178, 154, 106, 0.9);/* Branded muted (gold-tinted) */ /* --- Borders --------------------------------------------------------- */ --border-gold-strong: rgba(var(--gold-rgb), 0.6); --border-gold: rgba(var(--gold-rgb), 0.4); --border-gold-soft: rgba(var(--gold-rgb), 0.22); --border-gold-faint: rgba(var(--gold-rgb), 0.12); --border-slate: rgba(100, 116, 139, 0.4); /* --- Typography ------------------------------------------------------ */ --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; /* Fixed navbar height. The body is padded by this to clear the bar, so any full-height container must subtract it or the page runs exactly one navbar past the fold — see the sticky-footer wrapper in page-shell.phtml. */ --nav-h: 4.25rem; /* Type scale. 2026-08-22 legibility pass: root raised 14.4px -> 16px. The V0 design was authored at a 16px root; running it at 14.4 shrank every rem by 10%, which put 58% of all font-size declarations at or under 13.5px. Raising the root restores the design's intended proportions (it also makes --container-7xl resolve to the 1280px V0 meant, not 1152px). */ --size-root: 16px; /* Legibility pass 2026-07: the V0 design was authored at a 16px root but this shell runs 14.4px, so the small tiers landed under 11px. xs/sm are raised one step; everything from --size-base up was already fine. */ --size-xs: 0.8125rem; /* 13px */ --size-sm: 0.9375rem; /* 15px */ --size-base: 1rem; /* 16px */ --size-lg: 1.125rem; /* 18px */ --size-xl: 1.25rem; /* 20px */ --size-2xl: 1.5rem; /* 24px */ --size-3xl: 1.875rem; /* 30px */ --size-4xl: 2.25rem; /* 36px */ --size-5xl: 3rem; /* 48px */ --size-6xl: 3.75rem; /* 60px */ /* Tracking (letter-spacing) */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.10em; --tracking-widest: 0.15em; --tracking-display: 0.20em; /* For Cinzel section titles */ /* --- Spacing scale (8pt grid, mirrors Tailwind) --------------------- */ --space-0: 0; --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; /* --- Radius ---------------------------------------------------------- * V0's tailwind.config.ts overrides: * rounded-lg = var(--radius) (10.8px) * rounded-md = calc(var(--radius) - 2px) (8.8px) * rounded-sm = calc(var(--radius) - 4px) (6.8px) * Anything that says "rounded-md" in V0 source means 8.8px, not the * Tailwind default 6px. Honor this scale here. */ --radius: 0.75rem; /* anchor — rounded-lg in V0 */ --radius-sm: calc(var(--radius) - 4px); /* 6.8px */ --radius-md: calc(var(--radius) - 2px); /* 8.8px */ --radius-lg: var(--radius); /* 10.8px */ --radius-xl: 1.5rem; --radius-full: 9999px; /* --- Shadows / Elevation -------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7); --shadow-inner: inset 0 1px 0 rgba(var(--gold-rgb), 0.1); /* Gold glow (signature ambient bloom) */ --glow-gold-soft: 0 0 24px rgba(var(--gold-rgb), 0.12); --glow-gold: 0 0 40px rgba(var(--gold-rgb), 0.18); --glow-gold-hot: 0 0 80px rgba(var(--gold-rgb), 0.30); /* --- Z-index scale --------------------------------------------------- */ --z-base: 1; --z-overlay: 10; --z-sticky: 20; --z-dropdown: 40; --z-nav: 100; --z-modal-bg: 900; --z-modal: 901; --z-toast: 1000; /* --- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-snappy: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 300ms; --dur-slower: 500ms; --dur-glacial: 8s; /* Shimmer animation cycle */ --dur-eternal: 60s; /* Ken Burns cycle */ /* --- Layout ---------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* V0 max-w-7xl = 80rem. At our 14.4px root that's 1152px (not 1440px) — the * earlier value was computed as if root were 16px and was wrong. */ --container-7xl: 80rem; --container-6xl: 72rem; /* --- Decorative composites ------------------------------------------- */ /* The signature top shimmer line used on nav, footer, panels. */ --shimmer-gold: linear-gradient( 90deg, transparent 0%, var(--gold-400) 30%, var(--gold-200) 50%, var(--gold-400) 70%, transparent 100% ); /* The signature dark gradient used on main glass surfaces. */ --glass-gold-bg: linear-gradient( 90deg, rgba(0, 0, 0, 0.88) 0%, rgba(15, 12, 6, 0.88) 50%, rgba(0, 0, 0, 0.88) 100% ); /* Gold gradient text (titles) */ --gradient-gold-text: linear-gradient( 180deg, var(--gold-100) 0%, var(--gold-400) 50%, var(--gold-500) 100% ); /* Play Now button gradient */ --gradient-play: linear-gradient( 90deg, var(--gold-400) 0%, var(--gold-200) 100% ); --gradient-play-hover: linear-gradient( 90deg, var(--gold-300) 0%, var(--gold-100) 100% ); }