/* * DRAMORY design tokens — the one place for colour and type. * Brand colours come from the DRAMORY BI (xHwp design/brand/dramory/tokens.json, decided 2026-09-29): * ink #122620 · forest #1D5C4A · paper #F2F5F1. * The full DRAMORY design pass comes later: change values here, not in site.css. * Copy of dramory-web home/static/tokens.css (dramory.ai) — keep the two in step. */ :root { /* brand */ --c-ink: #122620; --c-forest: #1D5C4A; --c-paper: #F2F5F1; /* light theme (default) */ --bg: var(--c-paper); --bg-raised: #F9FBF8; --fg: var(--c-ink); --fg-muted: #4D5E57; --fg-faint: #7C8A84; --rule: rgba(18, 38, 32, 0.16); --rule-strong: rgba(18, 38, 32, 0.55); --accent: var(--c-forest); --accent-fg: var(--c-paper); --focus: #1D5C4A; /* type — system faces only (no font downloads). Latin display = classic book serif, Hangul falls through to the platform's Gothic, which pairs well with it. */ --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", system-ui, sans-serif; --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* scale */ --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.1875rem; --step-2: 1.5rem; --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); --step-4: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem); /* layout */ --page: 70rem; --measure: 36rem; --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem); --radius: 2px; color-scheme: light; } /* dark theme: follows the system unless the visitor picked one (data-theme on ) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0D1714; --bg-raised: #13211C; --fg: #E4EBE6; --fg-muted: #A3B4AC; --fg-faint: #74857E; --rule: rgba(228, 235, 230, 0.14); --rule-strong: rgba(228, 235, 230, 0.5); --accent: #86C0A8; --accent-fg: #0D1714; --focus: #86C0A8; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0D1714; --bg-raised: #13211C; --fg: #E4EBE6; --fg-muted: #A3B4AC; --fg-faint: #74857E; --rule: rgba(228, 235, 230, 0.14); --rule-strong: rgba(228, 235, 230, 0.5); --accent: #86C0A8; --accent-fg: #0D1714; --focus: #86C0A8; color-scheme: dark; }