/* Hallmark · genre: modern-minimal · theme: custom (Tally-referenced cool-indigo, * instrument-panel discipline borrowed from Cobalt) · redesign · designed-as-app * paper-band: light · display-style: grotesk-sans (Geist) · accent-hue: cool-cobalt (256) */ :root { color-scheme: light; /* ── Paper / ink — cool engineered near-white, never pure #fff/#000 ── */ --color-paper: oklch(97.8% 0.005 255); /* page ground */ --color-paper-1: oklch(99.3% 0.003 255); /* panel / card surface */ --color-paper-2: oklch(95.0% 0.008 255); /* recessed surface (inputs, browse tree) */ --color-paper-3: oklch(91.5% 0.010 255); /* hover/active recessed surface */ --color-ink: oklch(22.0% 0.020 258); /* headings, primary text */ --color-ink-2: oklch(38.0% 0.016 257); /* body text */ --color-ink-3: oklch(48.0% 0.013 257); /* secondary / hint text */ --color-ink-4: oklch(66.0% 0.010 257); /* placeholder / disabled text */ --color-rule: oklch(85.0% 0.010 255); /* visible hairline border */ --color-rule-soft: oklch(90.5% 0.008 255); /* quiet hairline */ /* ── Accent — one cobalt signal, used for focus / links / active state only ── */ --color-accent: oklch(52.0% 0.185 256); --color-accent-ink: oklch(98.5% 0.004 255); --color-accent-tint: oklch(93.5% 0.030 256); --color-focus: oklch(48.0% 0.200 256); /* ── Functional state colours — status/health semantics, not brand accent ── */ --color-success: oklch(52.0% 0.145 149); --color-success-ink: oklch(98.5% 0.004 149); --color-warning: oklch(64.0% 0.165 68); --color-warning-ink: oklch(20.0% 0.030 68); --color-danger: oklch(53.0% 0.195 25); --color-danger-ink: oklch(98.5% 0.004 25); /* ── Typography — Geist family throughout (single-family discipline is the modern-minimal signature), Geist Mono as the one outlier for status/data. Geist covers Latin only; "Noto Sans KR" carries the Korean UI copy — the browser falls back to it per-glyph automatically. */ --font-display: "Geist", "Noto Sans CJK KR", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", "Noto Sans CJK KR", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", "Noto Sans CJK KR", "Noto Sans KR", ui-monospace, "SF Mono", Menlo, monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.3125rem; /* 21px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ /* ── Spacing — 4pt scale ── */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.375rem; /* 6px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* ── Radius — tight/technical for surfaces, pill for actions & chips ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ── Elevation — hairline borders do the work; shadow is a whisper, one only ── */ --shadow-whisper: 0 1px 2px oklch(20% 0.02 258 / 0.06); /* ── Motion — three named eases, no bounce/overshoot ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 100ms; --dur-mid: 180ms; --dur-slow: 280ms; /* ── Z-index — named scale ── */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: var(--dur-fast) !important; scroll-behavior: auto !important; } }