/* ============================================================ VÍCTOR ANAYA — Design System colors_and_type.css · Foundations: color + typography Actuario · Tax Technology — personal portfolio brand ============================================================ */ /* ---- Webfonts (Google Fonts) -------------------------------- Jost → display / brand wordmark (geometric, wide-tracked) IBM Plex Sans → body / UI text (humanist, technical) IBM Plex Mono → data, code, formulas, eyebrows NOTE: no original font files were supplied — these are the closest Google Fonts matches to the brand specimen. Flagged. -------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ---------- BRAND CORE ---------- */ --navy-900: #07182B; /* deepest background — the "night" navy */ --navy-800: #0A1A2F; /* primary dark surface */ --navy-700: #0F2540; /* raised dark surface / cards on dark */ --navy-600: #163251; /* hairlines & borders on dark */ --cobalt: #1E40AF; /* primary action / brand accent blue */ --cobalt-600:#1D3FAF; --cobalt-400:#3B6FD4; /* hover / lighter cobalt */ --cobalt-200:#9DB6E8; /* tints, links on light */ /* ---------- SLATE / NEUTRALS ---------- */ --slate-900: #1B2227; /* near-black text on light */ --slate-700: #3A444B; /* logo slate / strong text */ --slate-500: #5C6873; /* secondary text */ --slate-400: #8A949E; /* tertiary / captions */ --slate-300: #BAC1C8; /* disabled, dividers on light */ --slate-200: #D7DBDF; /* borders on light */ --slate-100: #ECEEF0; /* subtle fills */ --paper: #F8F9F3; /* primary light background (warm off-white)*/ --paper-50: #FCFCF8; --white: #FFFFFF; /* ---------- GOLD (use VERY sparingly) ---------- */ --gold-600: #A8842F; /* gold text on light */ --gold-500: #C2A14A; /* the accent — highlights only */ --gold-300: #E0CB8E; /* gold tint */ /* ---------- DATA-VIZ / SUPPORT ---------- */ --teal: #3FA796; /* secondary data series (from dark hero) */ --positive: #2E8B6F; --negative: #B8503C; --warning: #C2A14A; /* ---------- SEMANTIC — LIGHT THEME (default) ---------- */ --bg: var(--paper); --bg-raised: var(--white); --bg-sunken: var(--slate-100); --fg1: var(--slate-900); /* primary text */ --fg2: var(--slate-500); /* secondary text */ --fg3: var(--slate-400); /* tertiary text */ --accent: var(--cobalt); --accent-fg: var(--white); --border: var(--slate-200); --border-strong: var(--slate-300); --hairline: rgba(27,34,39,0.08); /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Jost', 'Century Gothic', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; /* ---------- TYPE SCALE (1.250 major-third-ish) ---------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 48px; --text-4xl: 64px; --text-5xl: 84px; /* ---------- TRACKING (wide tracking is core to the brand) ---------- */ --track-tight: -0.01em; --track-normal: 0; --track-wide: 0.08em; --track-wider: 0.16em; /* eyebrows, taglines */ --track-widest: 0.28em; /* the brand wordmark signature */ /* ---------- RADII (restrained, near-square) ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* ---------- SPACING (8pt base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- ELEVATION ---------- */ --shadow-sm: 0 1px 2px rgba(7,24,43,0.06), 0 1px 1px rgba(7,24,43,0.04); --shadow-md: 0 4px 12px rgba(7,24,43,0.08), 0 1px 3px rgba(7,24,43,0.06); --shadow-lg: 0 16px 40px rgba(7,24,43,0.12), 0 4px 10px rgba(7,24,43,0.06); --shadow-navy: 0 18px 50px rgba(7,24,43,0.35); /* ---------- MOTION ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* calm ease-out */ --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; } /* ============================================================ DARK THEME — apply on .theme-dark or [data-theme="dark"] ============================================================ */ .theme-dark, [data-theme="dark"] { --bg: var(--navy-800); --bg-raised: var(--navy-700); --bg-sunken: var(--navy-900); --fg1: #EAF0F6; --fg2: #9FB0C2; --fg3: #647892; --accent: var(--cobalt-400); --accent-fg: var(--white); --border: var(--navy-600); --border-strong: #21385A; --hairline: rgba(255,255,255,0.08); } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ .brand-wordmark { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--track-widest); text-transform: uppercase; } .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--fg2); } h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-4xl); line-height: 1.04; letter-spacing: var(--track-tight); color: var(--fg1); } h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.12; letter-spacing: var(--track-tight); color: var(--fg1); } h3, .h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; color: var(--fg1); } p, .body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: 1.62; color: var(--fg1); } .lead { font-family: var(--font-body); font-weight: 300; font-size: var(--text-md); line-height: 1.6; color: var(--fg2); } small, .caption { font-size: var(--text-sm); color: var(--fg2); line-height: 1.45; } code, .mono, .data { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--cobalt-400); }