/* ═══════════════════════════════════════════════════════════════════════════ TRX Energy Bot — Design Tokens Session: autonomous design-direction task (2026-07-11) SELECTED DIRECTION: "Quartz Terminal" ── Why: crypto-native dark aesthetic with teal/energy accent. Syne headings (geometric, NOT Inter/Roboto/Space Grotesk). Teal (#12c9a6) reads as "efficient money flow / clean energy" for a financial blockchain service. The most conservative-premium choice for this audience. REJECTED DIRECTION B: "Solar Strike" ── Why rejected: Clash Display headings + dominant gold/amber (#f5c230) reads as "DeFi hype / meme-coin project" rather than reliable service. Too trendy; risks distrust from conservative crypto users. REJECTED DIRECTION C: "Editorial Finance" ── Why rejected: Light mode with Playfair Display and off-white background looks like a traditional fintech bank. Crypto users (95% of our audience) expect dark mode. Unfamiliar aesthetic = higher bounce rate. ═══════════════════════════════════════════════════════════════════════════ */ /* Fonts are loaded via preconnect in (build_head in layout.py). No @import here — avoids double-loading and render-blocking @import penalty. */ :root { /* ───────────────────────────────────────────────────────────────────────── Color Family 1: Neutral palette (background, surfaces, borders) One family — cool-blue undertone blacks and dark greys ───────────────────────────────────────────────────────────────────────── */ --c-bg: #07080f; /* page root background */ --c-surface: #0d0f1c; /* card, input, header-on-scroll surfaces */ --c-surface-2: #131628; /* elevated: dropdowns, modals */ --c-border: #1d2035; /* dividers, subtle borders */ --c-border-2: #262940; /* stronger border for emphasis */ /* ───────────────────────────────────────────────────────────────────────── Color Family 2: Text (primary readable content) ───────────────────────────────────────────────────────────────────────── */ --c-text: #e2e6f4; /* primary text — cool white */ /* ───────────────────────────────────────────────────────────────────────── Color Family 3: Muted text (secondary, placeholders, footer) ───────────────────────────────────────────────────────────────────────── */ --c-muted: #5a6080; /* secondary text, nav links at rest */ --c-muted-2: #38405a; /* footer links, very low emphasis */ /* ───────────────────────────────────────────────────────────────────────── Color Family 4: Teal — primary brand accent ("energy / efficiency") ───────────────────────────────────────────────────────────────────────── */ --c-teal: #12c9a6; /* primary CTA bg, active states, logo */ --c-teal-dim: #0ea88c; /* hover: slightly darker */ --c-teal-ghost: rgba(18, 201, 166, 0.10); /* subtle tinted bg */ --c-teal-glow: rgba(18, 201, 166, 0.22); /* for shadows/glows */ /* ───────────────────────────────────────────────────────────────────────── Color Family 5: Amber — warm accent (hero CTA, pricing, callouts) ───────────────────────────────────────────────────────────────────────── */ --c-amber: #f59120; /* hero button, savings badges */ --c-amber-dim: #d97a10; /* hover */ --c-amber-ghost: rgba(245, 145, 32, 0.10); /* ───────────────────────────────────────────────────────────────────────── Typography NOT Inter / NOT Roboto / NOT Space Grotesk for headings (generic AI look) ───────────────────────────────────────────────────────────────────────── */ --font-head: 'Syne', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 44px; --text-5xl: 58px; /* ───────────────────────────────────────────────────────────────────────── Spacing — 4px base rhythm ───────────────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ───────────────────────────────────────────────────────────────────────── Border radius ───────────────────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; /* ───────────────────────────────────────────────────────────────────────── Shadows ───────────────────────────────────────────────────────────────────────── */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.60), 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-teal: 0 0 18px var(--c-teal-glow), 0 0 6px var(--c-teal-glow); /* ───────────────────────────────────────────────────────────────────────── Transitions ───────────────────────────────────────────────────────────────────────── */ --t-fast: 150ms ease; --t-normal: 220ms ease; --t-spring: 280ms cubic-bezier(0.16, 1, 0.3, 1); /* ───────────────────────────────────────────────────────────────────────── Layout ───────────────────────────────────────────────────────────────────────── */ --max-w: 1200px; --nav-h: 64px; }