/* ============================================================================ emboros 디자인 토큰 — 3무드 (시각 톤만 분리. 기능은 모듈 시스템 별개) 사용: 색 공간 OKLCH. neutral은 브랜드 hue가 섞인 tinted neutral(순수 회색 금지). 명도 대비(WCAG AA): ink/ink-muted on bg ≥ 4.5:1, on-primary on primary-strong ≥ 4.5:1. ============================================================================ */ /* ── semantic (무드 공통, 필요 시 무드가 오버라이드) + 기본값 = minimal-premium light ── */ :root { --color-success: oklch(0.52 0.13 150); /* 배지 near-white 텍스트 AA(≥4.5:1) 위해 명도 낮춤 */ --color-warning: oklch(0.75 0.14 75); /* 밝은 옐로 — 배지는 on-warning(어두운) 텍스트 사용 */ --color-danger: oklch(0.55 0.20 25); --color-info: oklch(0.53 0.13 250); /* 배지 AA 위해 명도 낮춤 */ --color-on-semantic: oklch(0.99 0.002 250); /* 어두운 semantic bg용 near-white */ --color-on-warning: oklch(0.28 0.04 75); /* 밝은 warning bg용 어두운 텍스트(테마 무관 고정) */ --color-focus: oklch(0.60 0.18 250); /* :focus-visible 링 */ } /* ────────────────────────────── 미니멀 프리미엄 ────────────────────────────── 절제된 모노톤 + 단일 골드 액센트. 좁은 반경(샤프) = 프리미엄 인상. */ :root, [data-mood="minimal-premium"] { --radius-scale: 0.7; --shadow-color: 240 14% 14%; --color-bg: oklch(0.99 0.002 255); --color-surface: oklch(1 0 0); --color-surface-2: oklch(0.975 0.003 255); --color-border: oklch(0.90 0.004 255); --color-ink: oklch(0.24 0.012 262); --color-ink-muted: oklch(0.45 0.012 262); --color-ink-subtle:oklch(0.52 0.010 262); /* 정보 텍스트 AA(≥4.5:1) — 라이트 bg 위 */ --color-primary: oklch(0.42 0.05 265); --color-primary-strong: oklch(0.34 0.05 265); /* 버튼 bg + 흰 텍스트 → AA */ --color-on-primary: oklch(0.99 0.002 255); --color-accent: oklch(0.70 0.10 85); /* muted gold, 절제 사용 */ --color-on-accent: oklch(0.24 0.03 85); } [data-mood="minimal-premium"][data-theme="dark"] { --shadow-color: 240 40% 3%; --color-bg: oklch(0.16 0.008 262); /* 순수 검정 금지 */ --color-surface: oklch(0.20 0.010 262); --color-surface-2: oklch(0.24 0.012 262); --color-border: oklch(0.31 0.012 262); --color-ink: oklch(0.95 0.004 262); --color-ink-muted: oklch(0.72 0.010 262); --color-ink-subtle:oklch(0.58 0.010 262); --color-primary: oklch(0.72 0.045 266); /* dark: 채도 낮춤 */ --color-primary-strong: oklch(0.64 0.045 266); --color-on-primary: oklch(0.16 0.01 262); --color-accent: oklch(0.76 0.09 85); --color-on-accent: oklch(0.18 0.03 85); } /* ────────────────────────────── 내추럴 트러스트 ────────────────────────────── 세이지/포레스트 그린 + 테라코타 액센트. 넓은 반경(소프트) = 친근·신뢰. */ [data-mood="natural-trust"] { --radius-scale: 1.15; --shadow-color: 140 22% 16%; --color-bg: oklch(0.99 0.008 122); --color-surface: oklch(1 0 0); --color-surface-2: oklch(0.975 0.010 122); --color-border: oklch(0.89 0.012 130); --color-ink: oklch(0.27 0.020 150); --color-ink-muted: oklch(0.46 0.020 150); --color-ink-subtle:oklch(0.52 0.016 150); /* 정보 텍스트 AA(≥4.5:1) — 라이트 bg 위 */ --color-primary: oklch(0.52 0.10 150); --color-primary-strong: oklch(0.44 0.11 150); /* 흰 텍스트 → AA */ --color-on-primary: oklch(0.99 0.01 122); --color-accent: oklch(0.68 0.13 55); /* terracotta */ --color-on-accent: oklch(0.99 0.01 80); } [data-mood="natural-trust"][data-theme="dark"] { --shadow-color: 140 45% 3%; --color-bg: oklch(0.17 0.012 150); --color-surface: oklch(0.21 0.014 150); --color-surface-2: oklch(0.25 0.016 150); --color-border: oklch(0.32 0.016 150); --color-ink: oklch(0.94 0.008 122); --color-ink-muted: oklch(0.72 0.014 140); --color-ink-subtle:oklch(0.58 0.014 140); --color-primary: oklch(0.70 0.10 150); --color-primary-strong: oklch(0.62 0.10 150); --color-on-primary: oklch(0.16 0.02 150); --color-accent: oklch(0.72 0.12 55); --color-on-accent: oklch(0.18 0.03 60); } /* ────────────────────────────── 비비드 다이나믹 ────────────────────────────── 고채도 일렉트릭 인디고 + 코랄 액센트. 균형 반경, 에너제틱. */ [data-mood="vivid-dynamic"] { --radius-scale: 1; --shadow-color: 270 32% 22%; --color-bg: oklch(0.99 0.005 287); --color-surface: oklch(1 0 0); --color-surface-2: oklch(0.975 0.008 287); --color-border: oklch(0.90 0.012 287); --color-ink: oklch(0.24 0.020 287); --color-ink-muted: oklch(0.45 0.020 287); --color-ink-subtle:oklch(0.52 0.016 287); /* 정보 텍스트 AA(≥4.5:1) — 라이트 bg 위 */ --color-primary: oklch(0.55 0.20 270); --color-primary-strong: oklch(0.47 0.21 270); /* 흰 텍스트 → AA */ --color-on-primary: oklch(0.99 0.005 287); --color-accent: oklch(0.68 0.20 30); /* vivid coral */ --color-on-accent: oklch(0.99 0.01 30); } [data-mood="vivid-dynamic"][data-theme="dark"] { --shadow-color: 270 50% 3%; --color-bg: oklch(0.16 0.014 287); --color-surface: oklch(0.20 0.018 287); --color-surface-2: oklch(0.24 0.020 287); --color-border: oklch(0.31 0.020 287); --color-ink: oklch(0.95 0.008 287); --color-ink-muted: oklch(0.72 0.016 287); --color-ink-subtle:oklch(0.58 0.016 287); --color-primary: oklch(0.70 0.16 272); /* dark: 채도 -20% */ --color-primary-strong: oklch(0.62 0.17 272); --color-on-primary: oklch(0.16 0.02 287); --color-accent: oklch(0.72 0.17 32); --color-on-accent: oklch(0.18 0.03 30); }