/* ============================================================ BURNT THUMB WORKS — Brand tokens (LIGHT / parchment theme) Self-contained: no @import, no CDN here (fonts linked in ). Raw palette is the studio's; semantic roles are re-keyed for a warm-paper, near-black-ink editorial page. ============================================================ */ :root { /* ===== RAW PALETTE (studio) ===== */ --soot-900:#14110D; --charcoal-850:#1A160F; --charcoal-800:#211C14; --charcoal-750:#29231A; --ash-700:#332B20; --ash-650:#3D3426; --ash-600:#4A4031; --ember-700:#8F3817; --ember-600:#A6431D; --ember-500:#C4551F; --ember-400:#DB6A33; --ember-300:#E98C5B; --ember-tint:#F3E0CC; --brass-700:#7A5A1C; --brass-600:#997225; --brass-500:#B98C2E; --brass-400:#CBA14A; --brass-300:#DBBE78; --brass-tint:#F0E5C9; --moss-700:#243528; --moss-600:#2E4632; --moss-500:#3B5340; --moss-400:#4E6B52; --moss-tint:#E2E6D6; /* Paper / parchment (the page itself) */ --parchment-50:#FBF4E1; --parchment-75:#F8EFD7; --parchment-100:#F3E8CE; --parchment-150:#EEE2C2; --parchment-200:#E7D9B5; --parchment-300:#DBC9A6; --parchment-400:#C9B58E; --parchment-500:#B19A70; /* Ink (dark, warm — near-black) */ --ink-900:#211A0E; --ink-800:#2C2413; --ink-700:#3A301C; --ink-600:#5A4A33; --ink-500:#766343; --ink-400:#94815E; /* Status hues */ --rust-500:#A8392C; --rust-tint:#F3DDD7; --gold-600:#9A7414; --gold-500:#C99227; --gold-tint:#F2E6C6; --pine-600:#2F5237; --pine-500:#3F7D55; --pine-tint:#DCE7D8; --slate-600:#3E5C66; --slate-500:#5E7C86; --slate-tint:#DCE6E9; /* ===== SEMANTIC ROLES (LIGHT) ===== */ --bg-base:#F0E4C7; /* warm parchment page */ --bg-shell:#EBDDBE; --surface-1:#FBF4E1; /* fresh-page card / panel */ --surface-2:#FDF9EE; /* raised, lightest card */ --surface-3:#F4E9CF; /* hover / inset */ --surface-sunken:#E9DBBC; --fg-strong:var(--ink-900); /* headings */ --fg-1:var(--ink-800); /* body */ --fg-2:var(--ink-600); /* secondary */ --fg-3:var(--ink-500); /* muted / metadata */ --fg-disabled:#A89472; --border-subtle:#E4D6B6; --border-default:#D8C49C; --border-strong:#C4AD82; --border-focus:var(--ember-600); --accent:var(--ember-600); --accent-hover:var(--ember-500); --accent-press:var(--ember-700); --accent-fg:#FBF1E2; --accent-soft:var(--ember-tint); --secondary:var(--brass-600); --ink-green:var(--moss-600); /* crest-ink green — studio voice */ --link:var(--ember-700); --link-hover:var(--ember-600); --success:var(--pine-500); --success-soft:var(--pine-tint); --warning:var(--gold-600); --warning-soft:var(--gold-tint); --danger:var(--rust-500); --danger-soft:var(--rust-tint); --info:var(--slate-600); --info-soft:var(--slate-tint); /* ===== TYPE ===== */ --font-display:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-serif:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace; --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-base:16px; --text-md:18px; --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:62px; --text-6xl:80px; --leading-tight:1.12; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7; --tracking-display:0.03em; --tracking-eyebrow:0.2em; --tracking-tight:-0.01em; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; /* ===== SPACING (4px base) ===== */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; /* ===== RADIUS ===== */ --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:14px; --radius-pill:999px; /* ===== ELEVATION (soft, warm, light-surface) ===== */ --shadow-sm:0 1px 2px rgba(58,42,18,.10); --shadow-md:0 2px 10px rgba(58,42,18,.10), 0 1px 0 rgba(255,252,243,.6) inset; --shadow-lg:0 16px 40px rgba(58,42,18,.16), 0 1px 0 rgba(255,252,243,.7) inset; --shadow-ember:0 6px 20px rgba(166,67,29,.18); /* ===== LAYOUT ===== */ --maxw:1120px; --maxw-prose:680px; }