/* casually.onl — design tokens. * Color = category. The bold treatment is spent on the duotone cards and the * hard-edged, high-contrast surfaces; everything else stays quiet. */ :root { /* brand spot colors */ --riso-pink: #FF1466; --riso-blue: #2E5BFF; --riso-yellow: #FFD23F; --riso-mint: #06D6A0; --riso-purple: #7C3AED; /* warm neutrals (used by the accent ink and tag hover) */ --ink: #1A1820; --paper: #FBF7EF; /* type — system faces, no web fonts to load */ --font-display: "Arial Black", Impact, Haettenschweiler, "Franklin Gothic Heavy", "Helvetica Neue", Arial, sans-serif; --font-body: Arial, "Helvetica Neue", "Liberation Sans", sans-serif; --font-serif: Georgia, "Times New Roman", Times, serif; --font-mono: "Courier New", Courier, "Liberation Mono", monospace; /* fluid type scale */ --fs-eyebrow: 0.78rem; --fs-small: 0.875rem; --fs-body: 1.0625rem; --fs-lead: clamp(1.15rem, 0.9rem + 1vw, 1.45rem); --fs-h3: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); --fs-h1: clamp(2.1rem, 1.3rem + 3.4vw, 4rem); --fs-hero: clamp(2.4rem, 1.3rem + 4.6vw, 5rem); /* spacing + shape — hard edges */ --gut: clamp(1rem, 0.6rem + 1.6vw, 2rem); --maxw: 1180px; --radius: 0; --radius-sm: 0; --border: 3px; /* semantic (light default) — high-contrast surface */ --bg: #FFFFFF; --bg-panel: #FFFFFF; --bg-sunk: #E9E9E9; --text: #000000; --text-soft: #3A3A3A; --line: #000000; --hairline: rgba(0, 0, 0, 0.22); --shadow: 6px 6px 0 #000000; --shadow-sm: 3px 3px 0 #000000; --focus: #0000FF; --media-blend: multiply; /* logo / site accent: purple by default; category and article pages override * these (on the element) with the active category's color. */ --accent: var(--riso-purple); --accent-ink: var(--paper); } :root[data-theme="dark"] { --bg: #000000; --bg-panel: #0B0B0B; --bg-sunk: #181818; --text: #FFFFFF; --text-soft: #B5B5B5; --line: #FFFFFF; --hairline: rgba(255, 255, 255, 0.28); --shadow: 6px 6px 0 rgba(255, 255, 255, 0.92); --shadow-sm: 3px 3px 0 rgba(255, 255, 255, 0.92); --focus: #FFFF00; --media-blend: screen; }