/* ═══════════════════════════════════════════════════════════ _tokens.css — 공용 컬러 토큰 (디자인 킷과 직교) ─────────────────────────────────────────────────────────── · 색 팔레트만 정의한다. 레이아웃·타이포·모서리·그림자·폰트는 각 킷의 style.css 책임 (그래야 "킷 × 색"이 독립적으로 조합됨). · 각 컬러 테마는 --primary / --primary-dark / --accent / --grad 만 지정. 파생값(soft·alpha·tint·glow)은 color-mix로 자동 생성. 다크 테마만 surface·text·border·bg 풀세트 지정. · 사용: + 킷 style.css 와 함께 link ═══════════════════════════════════════════════════════════ */ :root { /* 기본값 = Bright */ --primary:#3B82F6; --primary-dark:#2563EB; --accent:#8B5CF6; --grad:linear-gradient(135deg,#3B82F6 0%,#8B5CF6 100%); /* surface / text (light 기준) */ --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F8FAFC; --border:#E2E8F0; --border-2:#CBD5E1; --border-soft:#F1F5F9; --text:#1E293B; --text-strong:#0F172A; --text-2:#64748B; --text-3:#94A3B8; /* status */ --ok:#10B981; --ok-bg:rgba(16,185,129,.10); --ok-border:rgba(16,185,129,.32); --err:#EF4444; --err-bg:rgba(239,68,68,.08); --err-border:rgba(239,68,68,.30); } /* 파생 색 자동 생성 (모든 테마 공통) */ [data-theme] { --primary-soft: color-mix(in srgb, var(--primary) 9%, #ffffff); --primary-alpha: color-mix(in srgb, var(--primary) 16%, transparent); --primary-tint: color-mix(in srgb, var(--primary) 7%, transparent); --primary-glow: color-mix(in srgb, var(--primary) 32%, transparent); } /* ═══════════ LIGHT (14) ═══════════ */ [data-theme="bright"] { --primary:#3B82F6; --primary-dark:#2563EB; --accent:#8B5CF6; --grad:linear-gradient(135deg,#3B82F6,#8B5CF6); } [data-theme="sunset"] { --primary:#F43F5E; --primary-dark:#E11D48; --accent:#FB923C; --grad:linear-gradient(135deg,#F43F5E,#FB923C); } [data-theme="forest"] { --primary:#16A34A; --primary-dark:#15803D; --accent:#65A30D; --grad:linear-gradient(135deg,#16A34A,#65A30D); } [data-theme="ocean"] { --primary:#0EA5E9; --primary-dark:#0284C7; --accent:#06B6D4; --grad:linear-gradient(135deg,#0EA5E9,#06B6D4); } [data-theme="royal"] { --primary:#7C3AED; --primary-dark:#6D28D9; --accent:#F59E0B; --grad:linear-gradient(135deg,#7C3AED,#F59E0B); } [data-theme="candy"] { --primary:#EC4899; --primary-dark:#DB2777; --accent:#A855F7; --grad:linear-gradient(135deg,#EC4899,#A855F7); } [data-theme="coral"] { --primary:#F97316; --primary-dark:#EA580C; --accent:#14B8A6; --grad:linear-gradient(135deg,#F97316,#14B8A6); } [data-theme="lavender"] { --primary:#8B5CF6; --primary-dark:#7C3AED; --accent:#C084FC; --grad:linear-gradient(135deg,#A78BFA,#C084FC); } [data-theme="nordic"] { --primary:#5B7C99; --primary-dark:#3D5A73; --accent:#88A0B3; --grad:linear-gradient(135deg,#5B7C99,#88A0B3); } [data-theme="crimson"] { --primary:#DC2626; --primary-dark:#B91C1C; --accent:#F59E0B; --grad:linear-gradient(135deg,#DC2626,#F59E0B); } [data-theme="mint"] { --primary:#10B981; --primary-dark:#059669; --accent:#2DD4BF; --grad:linear-gradient(135deg,#10B981,#2DD4BF); } [data-theme="grape"] { --primary:#9333EA; --primary-dark:#7E22CE; --accent:#E879F9; --grad:linear-gradient(135deg,#9333EA,#E879F9); } [data-theme="rosegold"] { --primary:#E11D48; --primary-dark:#BE123C; --accent:#FDA4AF; --grad:linear-gradient(135deg,#FB7185,#FDA4AF); } [data-theme="editorial"]{ --primary:#1E3A8A; --primary-dark:#172554; --accent:#B91C1C; --grad:linear-gradient(135deg,#1E3A8A,#334155); } /* Mocha — 크림 표면 (색 팔레트 일부) */ [data-theme="mocha"] { --primary:#B45309; --primary-dark:#92400E; --accent:#D97706; --grad:linear-gradient(135deg,#B45309,#D97706); --bg:#FCFBF7; --surface:#FFFEFB; --surface-2:#F6F1E7; --border:#E7DECB; --border-2:#D6C9AE; --border-soft:#F0EADB; --text:#3F3522; --text-strong:#2A2113; --text-2:#7A6B4F; --text-3:#A8997B; } /* ═══════════ DARK (4) ═══════════ */ [data-theme="neon"] { --primary:#22D3EE; --primary-dark:#06B6D4; --accent:#A3E635; --grad:linear-gradient(135deg,#22D3EE,#A3E635); --bg:#0A0E14; --surface:#121821; --surface-2:#0E141C; --border:#1E293B; --border-2:#334155; --border-soft:#161E2A; --text:#E2E8F0; --text-strong:#F8FAFC; --text-2:#94A3B8; --text-3:#64748B; } [data-theme="cyberpunk"] { --primary:#E879F9; --primary-dark:#D946EF; --accent:#22D3EE; --grad:linear-gradient(135deg,#E879F9,#22D3EE); --bg:#08070D; --surface:#13101C; --surface-2:#0D0B15; --border:#2A2440; --border-2:#3D3557; --border-soft:#1C1830; --text:#E9D5FF; --text-strong:#FAF5FF; --text-2:#A78BC9; --text-3:#6D5F8C; } [data-theme="terminal"] { --primary:#4ADE80; --primary-dark:#22C55E; --accent:#A3E635; --grad:linear-gradient(135deg,#4ADE80,#A3E635); --bg:#0B0F0C; --surface:#10160F; --surface-2:#0D120B; --border:#1C2A1B; --border-2:#2D3F2B; --border-soft:#152014; --text:#BBF7D0; --text-strong:#DCFCE7; --text-2:#86C99A; --text-3:#5A7D62; } [data-theme="midnight"] { --primary:#60A5FA; --primary-dark:#3B82F6; --accent:#818CF8; --grad:linear-gradient(135deg,#60A5FA,#818CF8); --bg:#0F172A; --surface:#1E293B; --surface-2:#172033; --border:#334155; --border-2:#475569; --border-soft:#1E2B42; --text:#E2E8F0; --text-strong:#F8FAFC; --text-2:#94A3B8; --text-3:#64748B; }