/* Design Tokens — ahultsch.com ============================ This is the ONLY file you should need to touch to change how the site looks: colors, fonts, sizes, spacing, and corner radii all live here as CSS Custom Properties ("variables"). Every other stylesheet references these tokens instead of hardcoding values. Dark mode is the default aesthetic. Light mode overrides are defined further down and are applied by toggling `data-theme="light"` on the element (see js/main.js). HOW TO CHANGE THE LOOK ----------------------- - Change a color: edit the hex value next to the variable, e.g. --color-accent: #4f8cff; -> --color-accent: #ff6b4f; - Change the font: edit --font-body / --font-mono. - Change spacing everywhere: edit the --space-* scale. - Change how round corners are: edit the --radius-* values. Nothing else in the codebase needs to change. */ :root { /* ---- Color: Dark theme (default) ---- */ --color-bg: #0e1013; --color-bg-alt: #16191f; --color-bg-elevated: #1c2028; --color-text: #e8eaed; --color-text-muted: #9aa1ac; --color-border: #2a2f38; --color-accent: #4f8cff; --color-accent-contrast: #0e1013; /* Project status badge (Stable / In Progress / On Hold). Kept deliberately muted — one extra hue only, so the palette stays reduced. --color-status-bg sits behind the badge on the tile image, so it must stay opaque enough to read over a real screenshot. */ --color-status-stable: #5ec27a; --color-status-in-progress: #4f8cff; --color-status-on-hold: #9aa1ac; --color-status-bg: rgba(14, 16, 19, 0.82); /* ---- Typography ---- */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale (rem = relative to root font-size, 1rem = 16px) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem; --text-3xl: 3.5rem; --leading-tight: 1.2; --leading-normal: 1.6; /* ---- Spacing scale ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; /* ---- Layout ---- */ --content-max-width: 72rem; /* ---- Motion (kept minimal on purpose) ---- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; } /* ---- Color: Light theme ---- Applied when . See js/main.js for the switching logic (localStorage + prefers-color-scheme fallback). */ :root[data-theme="light"] { --color-bg: #ffffff; --color-bg-alt: #f4f5f7; --color-bg-elevated: #ffffff; --color-text: #14161a; --color-text-muted: #5a6270; --color-border: #e2e4e8; --color-accent: #2f6fed; --color-accent-contrast: #ffffff; --color-status-stable: #2e9e55; --color-status-in-progress: #2f6fed; --color-status-on-hold: #5a6270; --color-status-bg: rgba(255, 255, 255, 0.9); }