/* * ============================================================ * DESIGN TOKENS — Inversión & Capital * ============================================================ * Single source of truth for all design decisions. * * MIGRATED FROM: index.html — :root blocks at lines 621 and 2887 * PHASE: 1 — Token Extraction * * Naming convention: new names (--color-*, --font-*) are * primary. Legacy aliases (--bg, --accent, --sans, etc.) map * to them so existing inline CSS keeps working without changes. * Remove legacy aliases in Phase 2 once CSS files are extracted. * ============================================================ */ :root { /* ══ COLOR SYSTEM ═══════════════════════════════════════════ */ /* Backgrounds */ --color-bg: #050505; /* Page background, section backgrounds */ --color-surface: #0d0d0d; /* Cards, panels */ --color-surface-2: #121212; /* Nested surfaces */ --color-surface-3: #080808; /* Morning Brief, deep platform panels */ /* Consolidates raw #080808 occurrences */ /* Text */ --color-text: #f5f5f5; /* Primary text, headings */ --color-text-2: #c8c8c8; /* Body copy, secondary headings */ /* Consolidates: #c5c5c5 #c7c7c7 #c8c8c8 #d0d0d0 #d1d1d1 */ --color-muted: #9f9f9f; /* Labels, captions, metadata */ --color-muted-2: #707070; /* Timestamps, tertiary labels */ /* Accent */ --color-accent: #e8d3a5; /* Gold — primary brand accent */ /* --accent2 was identical duplicate, removed */ /* Semantic (Platform) */ --color-up: #34d399; /* Positive deltas, gains */ --color-down: #f87171; /* Negative deltas, losses */ /* Borders */ --color-border: rgba(255,255,255,.08); /* Subtle borders, dividers */ --color-border-2: rgba(255,255,255,.16); /* Stronger borders, modal edges */ /* Glassmorphism */ --glass-bg: rgba(255,255,255,.05); /* Glass surface fill */ --glass-blur: blur(24px); --glass-border: 1px solid rgba(255,255,255,.08); /* ── Legacy aliases — existing inline CSS uses these names ── */ /* Remove in Phase 2 when CSS files are extracted and updated. */ --bg: var(--color-bg); --surface: var(--color-surface); --surface2: var(--color-surface-2); --text: var(--color-text); --muted: var(--color-muted); --muted2: var(--color-muted-2); --accent: var(--color-accent); --glass: var(--glass-bg); --line: var(--color-border); --line2: var(--color-border-2); --up: var(--color-up); --dn: var(--color-down); /* ══ SHADOWS ════════════════════════════════════════════════ */ --shadow: 0 10px 30px rgba(0,0,0,.35), 0 30px 80px rgba(0,0,0,.45); --shadow-lg: 0 40px 120px rgba(0,0,0,.65); /* ══ TYPOGRAPHY ═════════════════════════════════════════════ */ --font-sans: 'Inter', sans-serif; --font-serif: 'Cormorant Garamond', serif; --font-mono: 'IBM Plex Mono', monospace; /* Legacy aliases */ --sans: var(--font-sans); --serif: var(--font-serif); --mono: var(--font-mono); /* Type Scale — Fluid (marketing) */ --text-xs: .65rem; /* 10.4px — labels, eyebrows, badges */ --text-sm: .78rem; /* 12.5px — deck copy, nav small */ --text-base: 1rem; /* 16px */ --text-lg: 1.05rem; /* 16.8px — body copy */ --text-xl: 1.3rem; /* 20.8px — feed titles */ --text-2xl: 1.55rem; /* 24.8px — display label */ --text-3xl: 2rem; /* 32px — analyst name */ --text-4xl: clamp(1.8rem, 3vw, 2.6rem); --text-5xl: clamp(2.6rem, 4vw, 4rem); --text-6xl: clamp(2.8rem, 4.5vw, 4.6rem); --text-7xl: clamp(3.8rem, 7.5vw, 8rem); /* Type Scale — Fixed (platform data labels) */ --text-micro: 8px; /* Table headers, th — replaces raw 7.5px/8px */ --text-data: 9px; /* Table td cells */ /* Letter Spacing */ --tracking-tight: -.04em; --tracking-normal: 0; --tracking-sm: .06em; --tracking-md: .12em; --tracking-lg: .18em; --tracking-xl: .22em; --tracking-2xl: .26em; /* Line Heights */ --leading-tight: .92; --leading-display: 1.02; --leading-snug: 1.25; --leading-normal: 1.7; --leading-relaxed: 1.85; --leading-loose: 2; /* ══ SPACING ════════════════════════════════════════════════ */ --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .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-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ══ BORDERS & RADII ════════════════════════════════════════ */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; /* ══ MOTION ═════════════════════════════════════════════════ */ --ease: cubic-bezier(.16,1,.3,1); /* Spring ease — all animations */ --ease-linear: linear; --ease-standard: ease; --duration-fast: .15s; /* Hover fills, bg transitions */ --duration-base: .25s; /* Color transitions, tab changes */ --duration-slow: .5s; /* Modal enter/exit, section fade */ --duration-enter: .65s; /* Chart bars, card reveals */ --duration-hero: 15s; /* Hero background zoom */ /* ══ Z-INDEX SCALE ══════════════════════════════════════════ */ --z-base: 0; --z-raised: 10; --z-dropdown: 200; --z-nav: 1000; --z-modal: 2000; --z-drawer: 3000; --z-brief: 8000; --z-overlay: 9000; --z-scanline: 9100; --z-loader: 9999; } /* ══ LIGHT THEME OVERRIDES ══════════════════════════════════ */ body.ic-theme-light { --color-bg: #f5f2eb; --color-surface: #ffffff; --color-surface-2: #ece8df; --color-surface-3: #f0ece3; --color-text: #1a1a1a; --color-text-2: #3a3a3a; --color-muted: #666666; --color-muted-2: #999999; --color-accent: #7a5c1e; --color-border: rgba(0,0,0,.1); --color-border-2: rgba(0,0,0,.2); --glass-bg: rgba(0,0,0,.04); --glass-border: 1px solid rgba(0,0,0,.1); /* Legacy aliases */ --bg: var(--color-bg); --surface: var(--color-surface); --surface2: var(--color-surface-2); --text: var(--color-text); --muted: var(--color-muted); --muted2: var(--color-muted-2); --accent: var(--color-accent); --glass: var(--glass-bg); --line: var(--color-border); --line2: var(--color-border-2); }