/* Design tokens for the Fes Naqvi portfolio site. Consumed directly by ../styles.css. This is the single source of truth — edit values here, not in the files that consume them. THEMES: the site now runs on a LIGHT theme by default (:root below). The original dark theme is preserved as a saved, fully-named token set under [data-theme="dark"] — every color variable name is identical across both blocks, so styles.css never needed to change. Nothing in the markup currently sets data-theme="dark" (there's no toggle UI yet), so today the dark block is dormant documentation, not dead code — flip it on by adding data-theme="dark" to in any page. ../resume.html keeps its own self-contained light palette inline (needs to look right when printed, independent of site theme/JS). */ :root { /* ---------- Color / surface (light theme — default) ---------- */ --color-bg-canvas: #f4f4f6; /* page background */ --color-bg-raised: #eef0f3; /* hover states, inputs, elevated chrome */ --color-bg-surface: #ffffff; /* card / panel fill */ --color-border-default: #bcc0c9; /* card, input, button borders; hairline dividers, section rules */ --color-text-primary: #1a1c22; --color-text-secondary: #5c6270; --color-text-tertiary: #6c7078; /* darkened from #8a8f9a — that value read 2.95:1 on canvas / 3.24:1 on white, both below the 4.5:1 AA text minimum; this hits ~4.5:1/4.97:1 (2026-08-14 accessibility audit) */ --color-accent-primary: #4a4fc4; /* indigo — links, focus, primary accent (darkened from the dark-theme #6e7cf6 for AA contrast on white) */ --color-accent-primary-tint: rgba(74, 79, 196, 0.1); --color-accent-secondary: #0d7c72; /* teal — hover states, secondary accent (darkened from #0f9488, which read 3.41:1/3.74:1, below AA; this hits ~4.6:1/5.07:1 — 2026-08-14 accessibility audit) */ --color-accent-tertiary: #896b00; /* gold — nav active-state text only (darkened from #9c7a00, which read 3.68:1/4.04:1, below AA; this hits ~4.6:1/5.04:1 — 2026-08-14 accessibility audit) */ --color-overlay-scrim: rgba(17, 17, 20, 0.45); /* modal backdrop */ --color-nav-scrim: rgba(255, 255, 255, 0.82); /* sticky nav / footer / drawer backdrop — the drawer shares this box directly rather than layering its own */ --color-brand-mark: #38445b; /* header logo SVG fill — light theme only, deliberately its own token rather than reusing --color-text-primary so it can hold a fixed navy regardless of future text-color changes */ /* ---------- Typography ---------- */ --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* UI/system face: nav, buttons, tags, form fields */ --font-editorial: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* content face: display, heading-lg, heading-sm, body-lg, body */ --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace; --text-display: clamp(36px, 5vw, 58px); /* hero H1 — font: --font-editorial */ --text-heading-lg: 30px; /* section H2, panel H2 (collapsed from a near-duplicate 28px) — font: --font-editorial */ --text-heading-sm: 18px; /* card / row H3 — font: --font-editorial */ --text-body-lg: 18px; /* hero paragraph, case lede — font: --font-editorial */ --text-body: 15px; /* default paragraph — font: --font-editorial */ --text-body-sm: 14px; /* secondary paragraph, buttons — stays --font-sans (UI face) */ --text-caption: 13px; /* meta text — stays --font-sans (UI face) */ --text-label: 11px; /* mono uppercase labels — stays --font-mono */ --leading-tight: 1.08; --leading-normal: 1.5; --tracking-tight: -0.02em; /* headings */ --tracking-tighter: -0.03em; /* display */ --tracking-wide: 0.06em; /* uppercase mono labels */ /* ---------- Radius ---------- */ --radius-lg: 14px; /* cards, panels, modal-scale surfaces */ --radius-md: 8px; /* buttons, inputs, small blocks */ --radius-pill: 100px; /* badges, tags, eyebrow */ --radius-circle: 50%; /* icon buttons (close, prev/next) */ /* ---------- Spacing (4px base unit) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px; --space-14: 88px; --space-16: 96px; --space-18: 108px; /* ---------- Elevation / motion ---------- */ --shadow-card-hover: 0 20px 40px -20px rgba(0, 0, 0, 0.6); --shadow-h1: 0 2px 8px rgba(0, 0, 0, 0.08); /* subtle on light — a dark-mode-strength glow would just look like a smudge behind now-dark text */ --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 280ms; --ease-standard: ease; --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); /* ---------- Layout ---------- */ --content-max-width: 1120px; } [data-theme="dark"] { /* ---------- Color / surface (dark theme — saved, not currently active) ---------- */ --color-bg-canvas: #0b0c0f; --color-bg-raised: #131519; --color-bg-surface: #16181d; --color-border-default: #24272e; --color-text-primary: #eef0f3; --color-text-secondary: #9aa0ab; --color-text-tertiary: #5c6270; --color-accent-primary: #6e7cf6; --color-accent-primary-tint: rgba(110, 124, 246, 0.14); --color-accent-secondary: #4fd1c5; --color-accent-tertiary: #ffd60a; --color-overlay-scrim: rgba(6, 7, 9, 0.7); --color-nav-scrim: rgba(11, 12, 15, 0.82); --color-brand-mark: var(--color-text-primary); /* unchanged dark-theme behavior — the fixed navy is a light-theme-only choice */ --shadow-h1: 0 4px 16px rgba(0, 0, 0, 0.45); /* stronger glow behind now-bright text */ }