/* ========================================================================== tokens.css — design tokens Single source of truth for color, type, space, radius and motion. Themes are expressed only as different values of the same token names. ========================================================================== */ :root { /* ---- Typography -------------------------------------------------- */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* ---- Type scale --------------------------------------------------- FIVE sizes for the whole site, desktop-first. Everything else is differentiated by weight, colour, tracking and case — never by adding another size. 1 타이틀 --fs-title hero name, page titles 2 제목 --fs-heading section headings, display figures 3 소제목 --fs-sub sub-headings, card titles, lede copy 4 설명 --fs-body body copy, descriptions, controls 5 태그 --fs-tag tags, eyebrows, labels, captions ------------------------------------------------------------------- */ --fs-title: clamp(2.75rem, 1.2rem + 5.4vw, 5.25rem); --fs-heading: clamp(1.7rem, 1.28rem + 1.65vw, 2.45rem); --fs-sub: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); --fs-tag: clamp(0.8125rem, 0.77rem + 0.18vw, 0.9375rem); /* Role aliases so component rules read by intent. They resolve to the five sizes above and must never be given a value of their own. */ --fs-display: var(--fs-title); --fs-h1: var(--fs-title); --fs-h2: var(--fs-heading); --fs-h3: var(--fs-sub); --fs-h4: var(--fs-sub); --fs-body-lg: var(--fs-sub); --fs-small: var(--fs-body); --fs-micro: var(--fs-body); --fs-eyebrow: var(--fs-tag); --lh-tight: 1.1; --lh-heading: 1.26; --lh-body: 1.72; --lh-compact: 1.55; --tracking-display: -0.028em; --tracking-heading: -0.018em; --tracking-eyebrow: 0.18em; /* ---- Space ------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.75rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-gap: clamp(4.5rem, 3rem + 6vw, 9rem); --shell-pad: clamp(1.25rem, 0.5rem + 3vw, 3.5rem); --shell-max: 1360px; --measure: 82ch; --measure-narrow: 68ch; /* ---- Radius ------------------------------------------------------ */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---- Motion ------------------------------------------------------ */ --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 460ms; --dur-cinematic: 780ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Layering ---------------------------------------------------- */ --z-canvas: 0; --z-content: 1; --z-nav: 60; --z-menu: 70; --z-lightbox: 90; /* Device cutouts are layout inputs, not decoration. `--nav-h` includes the top inset so every anchor/hero offset uses the same physical edge. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --nav-bar-h: 74px; --nav-h: calc(var(--nav-bar-h) + var(--safe-top)); } /* ========================================================================== LIGHT — editorial, warm neutral paper, near-black type ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; --bg-primary: #fafafa; --bg-secondary: #f1f3f6; --bg-inset: #e8ecf2; --surface-primary: #ffffff; --surface-raised: #ffffff; --surface-glass: rgba(255, 255, 254, 0.62); --surface-glass-hover: rgba(255, 255, 254, 0.8); --surface-tint: rgba(26, 24, 20, 0.035); --text-primary: #17191e; --text-secondary: #484d57; --text-muted: #737986; --text-inverse: #fafafa; --border-subtle: rgba(35, 46, 64, 0.11); --border-strong: rgba(35, 46, 64, 0.2); --border-active: rgba(35, 46, 64, 0.38); --border-highlight: rgba(255, 255, 255, 0.85); --shadow-soft: 0 1px 2px rgba(26, 24, 20, 0.04), 0 6px 20px rgba(26, 24, 20, 0.05); --shadow-lifted: 0 2px 4px rgba(26, 24, 20, 0.05), 0 18px 44px rgba(26, 24, 20, 0.1); --accent: #8a5c1d; --accent-hover: #6f4915; --accent-soft: rgba(138, 92, 29, 0.1); --accent-line: rgba(138, 92, 29, 0.32); --ambient-light: rgba(75, 135, 218, 0.24); --focus-ring: #8a5c1d; --canvas-mask: linear-gradient( to bottom, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0.85) 82%, var(--bg-primary) 100% ); } /* ========================================================================== DARK — deep graphite, cinematic, restrained optical highlights ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg-primary: #0e0d0c; --bg-secondary: #141312; --bg-inset: #1a1917; --surface-primary: #161514; --surface-raised: #1c1b19; --surface-glass: rgba(30, 29, 27, 0.58); --surface-glass-hover: rgba(38, 36, 33, 0.74); --surface-tint: rgba(255, 253, 247, 0.04); /* Dark-mode secondary text sits high on purpose: thin Korean glyphs on a near-black ground lose far more perceived contrast than Latin does. */ --text-primary: #f4f2ed; --text-secondary: #cbc6bd; --text-muted: #9c968d; --text-inverse: #12110f; --border-subtle: rgba(255, 250, 240, 0.11); --border-strong: rgba(255, 250, 240, 0.19); --border-active: rgba(255, 250, 240, 0.32); --border-highlight: rgba(255, 250, 240, 0.14); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.34); --shadow-lifted: 0 2px 6px rgba(0, 0, 0, 0.44), 0 22px 56px rgba(0, 0, 0, 0.52); --accent: #d9a961; --accent-hover: #e8bd7c; --accent-soft: rgba(217, 169, 97, 0.13); --accent-line: rgba(217, 169, 97, 0.34); --ambient-light: rgba(217, 169, 97, 0.2); --focus-ring: #d9a961; --canvas-mask: linear-gradient( to bottom, rgba(14, 13, 12, 0) 40%, rgba(14, 13, 12, 0.86) 82%, var(--bg-primary) 100% ); } /* ========================================================================== Per-page accent overrides. One accent per page — never two competing accents on the same screen. ========================================================================== */ :root[data-accent="steel"] { --accent: #2f6394; --accent-hover: #24506f; --accent-soft: rgba(47, 99, 148, 0.1); --accent-line: rgba(47, 99, 148, 0.32); --ambient-light: rgba(120, 168, 214, 0.26); --focus-ring: #2f6394; } :root[data-theme="dark"][data-accent="steel"] { --accent: #7fb2e0; --accent-hover: #9cc7ee; --accent-soft: rgba(127, 178, 224, 0.13); --accent-line: rgba(127, 178, 224, 0.34); --ambient-light: rgba(127, 178, 224, 0.18); --focus-ring: #7fb2e0; }