/* ============================================================================ FUNDS BENCHMARK — Colors & Type Single continuous tonal ladder, with antique gold as the only accent. Source of truth: FundBenchmark/Sources/Theme/FBColors.swift + fb-theme/style.css ============================================================================ */ /* Fonts — Google Fonts (substituted for local TTFs not shipped with repo). Originals: Montserrat (display), DM Sans (body), SF Mono (code/ISINs). See README for substitution notes. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------------------------------------------------------------------------- 1 · Tonal ladder (base — same in both modes, named by material) Obsidian → Charcoal → Graphite → Slate → Pewter → Silver → Platinum → Ivory Every neutral in the app must come from this scale. No stray warm/cool shifts as you move up the ramp. ---------------------------------------------------------------------------- */ :root { /* raw palette — DARK (native) */ --fb-obsidian: #0a0a0b; /* deepest background */ --fb-charcoal: #141416; /* card surface */ --fb-graphite: #1c1c1f; /* elevated surface, stat chip */ --fb-slate: #2a2a2f; /* border, divider */ --fb-pewter: #4a4a52; /* muted text, disabled */ --fb-silver: #8a8a94; /* secondary text */ --fb-platinum: #c4c4cc; /* body text in dark mode */ --fb-ivory: #f4f4f6; /* primary text */ --fb-white: #ffffff; /* Brand gold — tarnished antique, not neon. Used sparingly. */ --fb-gold: #c9a962; --fb-gold-light: #e4d4a4; --fb-gold-dark: #a68b3d; --fb-gold-15: rgba(201, 169, 98, 0.15); /* tinted backgrounds */ --fb-gold-08: rgba(201, 169, 98, 0.08); /* Status — institutional, never neon */ --fb-success: #4ade80; /* positive returns */ --fb-error: #f87171; /* negative returns */ --fb-warning: #fbbf24; --fb-info: #60a5fa; /* Comparison run — warm→cool arc for 2-5 funds on one chart */ --fb-cmp-1: #c9a962; /* gold */ --fb-cmp-2: #60a5fa; /* info blue */ --fb-cmp-3: #a78bfa; /* purple */ --fb-cmp-4: #4ade80; /* green */ --fb-cmp-5: #f472b6; /* pink */ /* Sector palette (matches FMP data palette in Swift) */ --fb-sector-tech: #60a5fa; --fb-sector-health: #4ade80; --fb-sector-fin: #c9a962; --fb-sector-cons-cyc: #f472b6; --fb-sector-comm: #a78bfa; --fb-sector-ind: #fb923c; --fb-sector-cons-def: #22d3ee; --fb-sector-energy: #f87171; --fb-sector-util: #a3e635; --fb-sector-real: #fbbf24; --fb-sector-mat: #8b5cf6; } /* ---------------------------------------------------------------------------- 2 · Semantic tokens — DARK mode defaults Use these in components, not the raw --fb-* swatches. ---------------------------------------------------------------------------- */ :root, [data-theme="dark"] { --bg: var(--fb-obsidian); --surface: var(--fb-charcoal); --surface-2: var(--fb-graphite); --border: rgba(42, 42, 47, 0.55); --border-soft: rgba(42, 42, 47, 0.28); --text: var(--fb-ivory); /* primary */ --text-2: var(--fb-platinum); /* body */ --text-muted: var(--fb-silver); /* secondary/meta */ --text-dim: var(--fb-pewter); /* disabled */ --accent: var(--fb-gold); --accent-ink: var(--fb-obsidian); /* text on gold surfaces */ --accent-soft: var(--fb-gold-15); /* Convenience aliases — same value as --fb-gold; safe to use either. */ --gold: var(--fb-gold); --gold-light: var(--fb-gold-light); --gold-dark: var(--fb-gold-dark); --gold-15: var(--fb-gold-15); --pos: var(--fb-success); --neg: var(--fb-error); --shadow-card: 0 2px 8px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.25); --shadow-elevated: 0 4px 16px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.35); --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.02); } /* ---------------------------------------------------------------------------- 3 · LIGHT mode — cream, not paper-white. Clean inversion, single key. ---------------------------------------------------------------------------- */ [data-theme="light"] { --fb-obsidian: #f8f8fa; /* light "deepest" — warm ivory bg */ --fb-charcoal: #ffffff; /* card */ --fb-graphite: #f0f0f4; /* elevated */ --fb-slate: #e0e0e6; /* border */ --fb-pewter: #9a9aa4; /* muted */ --fb-silver: #6a6a74; /* secondary */ --fb-platinum: #3a3a44; /* body */ --fb-ivory: #1a1a1e; /* primary text */ --bg: var(--fb-obsidian); --surface: var(--fb-charcoal); --surface-2: var(--fb-graphite); --border: rgba(60, 50, 30, 0.10); --border-soft: rgba(60, 50, 30, 0.05); --text: var(--fb-ivory); --text-2: var(--fb-platinum); --text-muted: var(--fb-silver); --text-dim: var(--fb-pewter); --accent-ink: #ffffff; /* gold + white text in light mode reads cleaner */ --shadow-card: 0 1px 2px rgba(16,16,20,0.04), 0 2px 8px rgba(16,16,20,0.06); --shadow-elevated: 0 4px 14px rgba(16,16,20,0.08), 0 10px 28px rgba(16,16,20,0.10); } /* ---------------------------------------------------------------------------- 4 · Typography ---------------------------------------------------------------------------- */ :root { --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', monospace; /* Modular scale — 6 roles, clear jobs */ --fs-hero: 32px; /* hero stat, single page stat */ --fs-h1: 24px; /* section headers */ --fs-h2: 18px; /* card title on large cards, small section header */ --fs-h3: 14px; /* card title, list row title */ --fs-body: 14px; /* body copy */ --fs-small: 12px; /* meta, labels */ --fs-micro: 10px; /* eyebrow caps, badge text */ --fs-stat-sm: 13px; /* in-card stat value */ --fs-stat-md: 22px; /* mid stat (fund-detail header) */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5; --tracking-eyebrow: 0.12em; --tracking-display: -0.01em; --tracking-tight: -0.015em; } /* Element-level semantics (h1..caption). Import colors_and_type.css and use these directly on markup, or reference the vars in your own styles. */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); /* Tabular numerals EVERYWHERE — this is institutional data, columns must line up */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--text); margin: 0; } h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--text); margin: 0; } h3, .h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text); margin: 0; } p, .body { font-size: var(--fs-body); color: var(--text-2); line-height: var(--lh-body); margin: 0; } small, .caption { font-size: var(--fs-small); color: var(--text-muted); } .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } /* Hero statistic — the primary "number" in fund detail / compare views */ .stat-hero { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-hero); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: 1; } code, kbd, .mono, .isin { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; } .pos { color: var(--pos); } .neg { color: var(--neg); } .gold { color: var(--accent); } /* ---------------------------------------------------------------------------- 5 · Spacing + radii + motion — canonicalised to a 4-pt grid Swift used 6/12/18/24/30/36/48; we align to 4/8/12/16/24/32/48 for cleaner multiples, keeping 18 as a legacy stop for inset parity. ---------------------------------------------------------------------------- */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --gutter-mobile: 24px; --gutter: 36px; --r-xs: 4px; /* badges */ --r-sm: 6px; /* small chips */ --r-md: 10px; /* inputs */ --r-lg: 12px; /* buttons, large inputs */ --r-card: 14px; /* cards */ --r-xl: 18px; /* pill track */ --r-pill: 9999px; /* capsules */ --dur-fast: 0.12s; --dur: 0.18s; /* shared animation duration from FBStyleKit */ --dur-slow: 0.35s; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* --fb-ease-out-expo */ }