/************************ Design tokens + fonts Loaded after reset.css, before style.css. Everything else consumes these vars. ************************/ /* --- Inter (self-hosted variable font, latin subset) --- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2"); } /* --- Clash Display (self-hosted variable font) — edgy display face --- */ @font-face { font-family: "Clash Display"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/clash-display.woff2") format("woff2"); } :root { /* --- Type families --- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Display / wordmark / headings — Inter stays for UI + body */ --font-display: "Clash Display", var(--font-sans); /* --- Fluid type scale (~1.25 ratio, ~320px -> ~1240px viewport) --- */ --step--1: clamp(0.833rem, 0.80rem + 0.16vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.22vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.44rem, 1.28rem + 0.8vw, 2rem); --step-3: clamp(1.728rem, 1.5rem + 1.14vw, 2.66rem); --step-4: clamp(2.074rem, 1.75rem + 1.6vw, 3.55rem); --step-5: clamp(2.488rem, 2.0rem + 2.44vw, 4.7rem); --leading-tight: 1.15; --leading-normal: 1.6; --tracking-tight: -0.01em; --tracking-wide: 0.08em; /* --- Spacing scale --- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-section: 5rem; /* gap between the 3 main sections */ --col-gap: 0.25rem; /* portfolio image gap, vertical + horizontal (tunable) */ /* --- Color --- Dark is the default theme (below). Light is an opt-in override applied via (see the block after :root). Only these tokens change between themes; everything consumes them via var(). */ color-scheme: dark; --color-bg: #000000; --color-surface: #141414; --color-text: #ffffff; --color-muted: #c4c4cc; --color-line: #2a2a2a; --color-accent: #4fd6d9; /* film-cyan — lines, labels, active filter, focus, hover frame */ --color-accent-weak: #1e5a5c; /* deep teal — subtle tints / underline track */ --focus-ring: var(--color-accent); /* --- Radius --- */ --radius: 0.25rem; --radius-pill: 999px; /* --- Motion --- */ --dur-fast: 150ms; --dur-mid: 300ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* --- Layout --- */ --measure: 65ch; /* comfortable line length for prose */ --topbar-h: 4rem; /* --- Z-index --- */ --z-topbar: 100; --z-dialog: 200; } /* Light theme — opt in with . Dark stays the default. */ :root[data-theme="light"] { color-scheme: light; --color-bg: #ffffff; --color-surface: #f6f6f7; --color-text: #18181b; --color-muted: #6b6f76; --color-line: #e3e3e6; --color-accent: #0e7490; /* darker cyan for contrast on white */ --color-accent-weak: #cffafe; --focus-ring: var(--color-accent); }