/* ============================================================================ tokens.css — 디자인 토큰 ---------------------------------------------------------------------------- 사이트 톤을 바꾸고 싶으면 원칙적으로 이 파일(또는 관리자 > 사이트 설정 > 디자인)만 건드리면 된다. 나머지 CSS 는 전부 여기 변수를 참조한다. 관리자 화면에서 저장한 값은 안에 :root{} 로 나중에 주입되므로 이 파일의 값을 덮어쓴다. 즉 이 파일은 "기본 테마"다. ========================================================================== */ :root { /* --- 1. 브랜드 컬러 : 보통 이 3개만 바꿔도 사이트 인상이 완전히 달라진다 --- */ --brand: #2f5bea; --brand-strong: #1d3fb8; --accent: #12b981; /* --- 2. 중립 색 : 밝기 단계. surface(배경) → ink(글자) 로 갈수록 진해진다 --- */ --surface: #ffffff; /* 페이지 배경 */ --surface-2: #f6f7f9; /* 섹션 교차 배경 */ --surface-3: #eceef2; /* 카드 위 강조 배경 */ --ink: #14161a; /* 본문 글자 */ --ink-2: #4b5159; /* 보조 글자 */ --ink-3: #868d97; /* 캡션 / 비활성 */ --line: #e2e5ea; /* 테두리 */ --line-strong: #c9cdd4; /* 상태 색 */ --ok: #12a150; --warn: #d98600; --danger: #e5484d; --info: #2f5bea; /* 브랜드 색 위에 올라가는 글자색 */ --on-brand: #ffffff; /* 반투명 파생색 : 배지·호버 배경 등에 쓴다 */ --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent); --brand-ring: color-mix(in srgb, var(--brand) 35%, transparent); /* --- 3. 타이포그래피 --- */ --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 화면 폭에 따라 매끄럽게 변하는 글자 크기 (clamp: 최소 / 유동 / 최대) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: clamp(1.0625rem, 0.2vw + 1rem, 1.125rem); --text-xl: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem); --text-2xl: clamp(1.5rem, 1.2vw + 1.2rem, 2rem); --text-3xl: clamp(1.875rem, 2vw + 1.3rem, 2.75rem); --text-4xl: clamp(2.25rem, 3.4vw + 1.4rem, 3.75rem); --leading-tight: 1.2; --leading-snug: 1.4; --leading-body: 1.75; --tracking-tight: -0.02em; --tracking-wide: 0.08em; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* --- 4. 간격 : --density 로 전체 여백을 한 번에 조절할 수 있다 (0.9 = 촘촘) --- */ --density: 1; --space-1: calc(0.25rem * var(--density)); --space-2: calc(0.5rem * var(--density)); --space-3: calc(0.75rem * var(--density)); --space-4: calc(1rem * var(--density)); --space-5: calc(1.5rem * var(--density)); --space-6: calc(2rem * var(--density)); --space-7: calc(3rem * var(--density)); --space-8: calc(4rem * var(--density)); --space-9: calc(6rem * var(--density)); /* 섹션 상하 여백 (모바일에서 자동으로 줄어든다) */ --section-y: clamp(3.5rem, 7vw, 7rem); /* --- 5. 레이아웃 --- */ --container: 1200px; --container-narrow: 760px; --gutter: clamp(1rem, 4vw, 2.5rem); --header-h: 72px; /* --- 6. 모서리 / 그림자 / 테두리 --- */ --radius: 14px; /* 기준값. 나머지는 여기서 파생 */ --radius-sm: calc(var(--radius) * 0.5); --radius-lg: calc(var(--radius) * 1.6); --radius-full: 999px; --border: 1px solid var(--line); --shadow-1: 0 1px 2px rgba(16, 20, 28, 0.06); --shadow-2: 0 4px 14px rgba(16, 20, 28, 0.08); --shadow-3: 0 18px 48px rgba(16, 20, 28, 0.12); /* --- 7. 모션 --- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --duration: 220ms; --z-header: 100; --z-drawer: 200; --z-toast: 300; } /* --------------------------------------------------------------------------- 다크 모드 : 토큰만 다시 칠하면 전체 UI 가 따라온다. .theme-dark 를 에 붙이면 수동 전환, 없으면 OS 설정을 따른다. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --surface: #101216; --surface-2: #171a1f; --surface-3: #21252c; --ink: #eef0f3; --ink-2: #b3b9c2; --ink-3: #7d848e; --line: #282d35; --line-strong: #3a414b; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.55); } } :root.theme-dark { --surface: #101216; --surface-2: #171a1f; --surface-3: #21252c; --ink: #eef0f3; --ink-2: #b3b9c2; --ink-3: #7d848e; --line: #282d35; --line-strong: #3a414b; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.55); } /* --------------------------------------------------------------------------- 프리셋 : 처럼 붙이면 브랜드 톤을 통째로 교체한다. 외주 초기 시안 잡을 때 후보를 빠르게 비교하는 용도. -------------------------------------------------------------------------- */ .preset-blue { --brand: #2f5bea; --brand-strong: #1d3fb8; --accent: #12b981; } .preset-warm { --brand: #e2603a; --brand-strong: #b84423; --accent: #f0b429; --radius: 10px; } .preset-forest { --brand: #1f7a5c; --brand-strong: #145742; --accent: #a3c644; --radius: 8px; } .preset-ink { --brand: #1a1d23; --brand-strong: #000000; --accent: #d4b483; --radius: 2px; } .preset-plum { --brand: #6d3ad4; --brand-strong: #4e26a3; --accent: #ff6b9d; --radius: 20px; }