/* ============================================================= tokens.css — FalcoAlgo Design System Tokens All CSS custom properties. Never hardcode these values. ============================================================= */ :root { /* ============================================================ COLORS — Background Layers (navy depth system) ============================================================ */ --color-bg-base: #0B0F14; /* Page base — very dark navy */ --color-bg-surface-1: #0D1117; /* Alternate section backgrounds */ --color-bg-surface-2: #141A21; /* Card / panel backgrounds */ --color-bg-surface-3: #1A2230; /* Card hover state */ --color-bg-footer: #080C10; /* Footer — slightly deeper navy */ --color-bg-overlay: #0F1520; /* Overlays, modals */ --color-bg-code: #1A2230; /* Inline code backgrounds */ --color-header-blur-bg: rgba(11, 15, 20, 0.92); --color-dropdown-bg: rgba(13, 17, 23, 0.98); /* ============================================================ COLORS — Brand Accents (cyan only — no purple, no orange) ============================================================ */ --color-accent-primary: #00D9FF; /* Primary CTA — used SPARINGLY */ --color-accent-hover: #00B8D4; /* CTA hover */ --color-accent-active: #0099B3; --color-accent-glow: rgba(0, 217, 255, 0.08); /* Subtle background glow */ --color-accent-glow-mid: rgba(0, 217, 255, 0.15); --color-accent-glow-strong: rgba(0, 217, 255, 0.25); /* ============================================================ COLORS — Text Hierarchy ============================================================ */ --color-text-primary: #F0F4F8; /* Main body text */ --color-text-secondary: #8B9BB4; /* Muted / secondary text */ --color-text-muted: #4A5568; /* Placeholder, captions */ --color-text-disabled: #2D3748; --color-text-accent: #00D9FF; --color-text-on-accent: #0B0F14; /* Text on cyan CTA buttons */ --color-text-nav: #CBD5E0; /* Nav links */ /* ============================================================ COLORS — Semantic / State ============================================================ */ --color-positive: #10B981; /* Positive stats, wins */ --color-positive-bg: rgba(16, 185, 129, 0.10); --color-negative: #EF4444; /* Negative stats, drawdown */ --color-negative-bg: rgba(239, 68, 68, 0.10); --color-warning: #F59E0B; --color-warning-bg: rgba(245, 158, 11, 0.10); /* ============================================================ COLORS — Borders and Dividers ============================================================ */ --color-border-default: #1F2A35; /* Card borders */ --color-border-subtle: #161F28; /* Faint dividers */ --color-border-strong: #2C3A47; /* Stronger borders */ --color-border-accent: rgba(0, 217, 255, 0.30); --color-border-accent-strong: rgba(0, 217, 255, 0.60); --color-divider: #1F2A35; --color-grid-line: rgba(30, 41, 59, 0.6); /* Background grid overlay */ /* ============================================================ TYPOGRAPHY — Families ============================================================ */ --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace; /* ============================================================ TYPOGRAPHY — H1 Hero Headline ============================================================ */ --type-h1-family: var(--font-display); --type-h1-weight: 700; --type-h1-size: clamp(2.75rem, 6vw, 4.25rem); --type-h1-lh: 1.05; --type-h1-ls: -0.03em; /* ============================================================ TYPOGRAPHY — H2 Section Headline ============================================================ */ --type-h2-family: var(--font-body); --type-h2-weight: 600; --type-h2-size: clamp(1.75rem, 3vw, 2.5rem); --type-h2-lh: 1.15; --type-h2-ls: -0.02em; /* ============================================================ TYPOGRAPHY — H3 Sub-Headline ============================================================ */ --type-h3-family: var(--font-body); --type-h3-weight: 600; --type-h3-size: 1.375rem; --type-h3-lh: 1.3; --type-h3-ls: -0.01em; /* ============================================================ TYPOGRAPHY — H4 Card Headline ============================================================ */ --type-h4-family: var(--font-body); --type-h4-weight: 600; --type-h4-size: 1.0625rem; --type-h4-lh: 1.35; --type-h4-ls: -0.005em; /* ============================================================ TYPOGRAPHY — Body ============================================================ */ --type-body-family: var(--font-body); --type-body-weight: 400; --type-body-size: 1rem; --type-body-lh: 1.7; --type-body-ls: 0; /* ============================================================ TYPOGRAPHY — Small / Captions ============================================================ */ --type-small-family: var(--font-body); --type-small-weight: 400; --type-small-size: 0.8125rem; --type-small-lh: 1.6; --type-small-ls: 0.01em; /* ============================================================ TYPOGRAPHY — Stat Numbers (mono for precision) ============================================================ */ --type-stat-family: var(--font-mono); --type-stat-weight: 500; --type-stat-size: 3rem; --type-stat-lh: 1.0; --type-stat-ls: -0.02em; /* ============================================================ TYPOGRAPHY — Nav Labels ============================================================ */ --type-nav-family: var(--font-body); --type-nav-weight: 500; --type-nav-size: 0.9375rem; --type-nav-lh: 1.0; --type-nav-ls: 0; /* ============================================================ TYPOGRAPHY — Button Labels ============================================================ */ --type-btn-family: var(--font-body); --type-btn-weight: 600; --type-btn-size: 0.9375rem; --type-btn-lh: 1.0; --type-btn-ls: 0.005em; /* ============================================================ TYPOGRAPHY — Eyebrow Labels (use sparingly — not on every section) ============================================================ */ --type-eyebrow-family: var(--font-body); --type-eyebrow-weight: 500; --type-eyebrow-size: 0.75rem; --type-eyebrow-lh: 1.0; --type-eyebrow-ls: 0.1em; --type-eyebrow-transform: uppercase; /* ============================================================ TYPOGRAPHY — Price Display (mono for financial data) ============================================================ */ --type-price-family: var(--font-mono); --type-price-weight: 500; --type-price-size: 2.25rem; --type-price-lh: 1.0; --type-price-ls: -0.02em; /* ============================================================ SPACING ============================================================ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ============================================================ LAYOUT ============================================================ */ --container-max: 1280px; --container-narrow: 860px; --container-wide: 1600px; --container-px: 3.5rem; /* 56px */ --container-px-mob: 1.25rem; /* 20px */ --section-py: 6rem; /* 96px */ --section-py-compact: 3rem; /* 48px */ --section-py-hero: 8rem; /* 128px */ /* ============================================================ BORDERS ============================================================ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-full: 9999px; --border-default: 1px solid var(--color-border-default); --border-subtle: 1px solid var(--color-border-subtle); --border-accent: 1px solid var(--color-border-accent); --border-accent-strong: 1.5px solid var(--color-border-accent-strong); /* ============================================================ SHADOWS (restrained — no heavy drops) ============================================================ */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50); --shadow-accent: 0 0 12px rgba(0, 217, 255, 0.08); /* Card hover glow — subtle */ --shadow-accent-hover: 0 0 20px rgba(0, 217, 255, 0.12); --shadow-cta: 0 0 16px rgba(0, 217, 255, 0.15); /* Button glow only on hover */ /* ============================================================ TRANSITIONS ============================================================ */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-medium: 280ms; --duration-slow: 400ms; --duration-xslow: 600ms; --ease-linear: cubic-bezier(0, 0, 1, 1); --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-default: all var(--duration-normal) var(--ease-default); --transition-fast: all var(--duration-fast) var(--ease-default); --transition-color: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); /* ============================================================ Z-INDEX SCALE ============================================================ */ --z-base: 0; --z-raised: 10; --z-sticky: 90; --z-header: 1000; --z-dropdown: 1010; --z-modal: 1100; --z-toast: 1200; /* ============================================================ HEADER ============================================================ */ --header-height-desktop: 72px; --header-height-mobile: 60px; }