/* pawlus.works — color tokens · rev B. Light is default; dark follows prefers-color-scheme or [data-theme="dark"]. */ :root { /* neutrals — slightly warm (paper + workshop) */ --paper: #F5F5F2; --paper-2: #ECECE7; --line: #DAD9D2; --graphite: #5C5B55; --ink: #161614; /* accent — PLA filament orange */ --accent: #FF5B1C; --accent-ink: #161614; /* text on accent (5.9:1) */ --accent-text: #C93F05; /* orange used as text on paper (4.6:1) */ /* area tints — same lightness */ --speedlab: #FF5B1C; --dev: #2A5BFF; --me: #12A150; /* semantic */ --error: #C8341A; /* semantic aliases */ --text-body: var(--ink); --text-muted: var(--graphite); --text-accent: var(--accent-text); --surface-page: var(--paper); --surface-field: var(--paper-2); --border-subtle: var(--line); --link: var(--ink); --focus-ring: var(--accent); /* background texture */ --grain: .5; /* @kind other */ /* noise opacity, mix-blend multiply */ --grid-major: rgba(22,22,20,.06); /* one line every 64px, no minor subdivisions */ --grid-big: 64px; /* @kind spacing */ /* liquid glass — only interactive elements above content */ --glass-bg: rgba(245,245,242,.55); /* thick: menu, overlay · blur(18px) saturate(160%) */ --glass-bg-hover: rgba(245,245,242,.72); --glass-thin: rgba(245,245,242,.22); /* thin: area tiles, secondary button · blur(4px) saturate(180%) */ --glass-line: rgba(22,22,20,.14); --glass-hl: rgba(255,255,255,.7); } /* Dark theme follows the system: set data-theme="dark" on (see tokens/base.css) — no toggle in the UI. */ :root[data-theme="dark"] { --paper: #161614; --paper-2: #1F1E1B; --line: #2E2D29; --graphite: #A5A49B; --ink: #F0EFE9; --accent: #FF6A2E; --accent-ink: #161614; --accent-text: #FF6A2E; --dev: #5C82FF; --me: #2FBF74; --grain: .25; /* @kind other */ --grid-major: rgba(240,239,233,.055); --glass-bg: rgba(22,22,20,.5); --glass-bg-hover: rgba(31,30,27,.7); --glass-thin: rgba(22,22,20,.3); --glass-line: rgba(240,239,233,.14); --glass-hl: rgba(255,255,255,.12); }