/* Brewly — Design Tokens * Light: warm offwhite canvas + amber accent * Dark: near-black canvas, slightly lifted surface, same amber at 12% softer * Single source of truth — :root holds light defaults, [data-theme="dark"] overrides. */ :root { /* Surfaces */ --bg: #FBFAF6; /* warm off-white page */ --surface: #FFFFFF; /* card surface */ --surface-2: #F4F1EA; /* subtle inset / hairline highlight */ --border: #E8E3D7; /* hairline card border */ /* Type */ --text: #1A1B16; /* ink */ --text-muted: #6B6A60; /* metadata, captions */ --text-soft: #9A9889; /* tertiary */ /* Accent — single, decisive */ --accent: #B45309; /* amber 700 — mustard/terracotta */ --accent-soft: #F3E4C5; /* tinted background / pill */ --accent-fg: #FFFFFF; /* text on accent */ /* Status (used sparingly) */ --success: #4F7A3D; --danger: #B23A2B; /* Geometry */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --gap: 12px; --pad: 20px; --maxw: 1180px; /* Type stacks */ --font-display: "Inter Tight", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Font sizes — fluid clamp() */ --fs-display: clamp(40px, 5.6vw, 68px); --fs-h2: clamp(26px, 2.6vw, 36px); --fs-h3: 18px; --fs-body: 15.5px; --fs-meta: 13px; --fs-tiny: 11.5px; } /* Optional serif stack — toggled via [data-font="serif"] on */ :root[data-font="serif"] { --font-display: "Iowan Old Style", "Charter", "Georgia", serif; --font-body: "Iowan Old Style", "Charter", "Georgia", serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; } :root[data-theme="dark"] { --bg: #0F1115; /* near-black */ --surface: #1A1D24; /* lifted card */ --surface-2: #21252D; --border: #2A2F38; --text: #ECEAE2; --text-muted: #9A9889; --text-soft: #6E7067; --accent: #D98714; /* amber 500-ish, brighter for dark */ --accent-soft: #3A2814; /* low-saturation amber tint */ --accent-fg: #1A1B16; --success: #6FA254; --danger: #D86B5C; } /* Base reset + keyframes shared across pages */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 180ms ease, color 180ms ease; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--accent-soft); color: var(--text); } /* i18n visibility — initial state is decided by JS on first paint */ [data-i18n-ko], [data-i18n-en] { display: none; } html[data-lang="ko"] [data-i18n-ko] { display: revert; } html[data-lang="en"] [data-i18n-en] { display: revert; } /* Tiny reveal for late paint items */ @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }