/* ============================================================================ Color palettes — . 레이아웃·타이포는 그대로, 컬러톤만 교체. · Cobalt(값 pro) = 쿨 블루(tokens.css 기본, override 없음 → data-palette 속성 없음) · Ember = 웜 앰버/오렌지 · Sage = 그린/틸 변경 대상: 주 액센트(--brand 계열) + WebGL 셰이더 토큰(--bg-base/--bg-ink). 라이트/다크를 각각 명시(프리페인트가 data-theme 를 항상 확정하므로 [data-theme=] 로 한정). 셀렉터 특이도 (0,3,0) > tokens.css 의 :root / :root[data-theme=dark] → 팔레트가 이김. hero.js 가 data-palette 변화를 관찰해 셰이더 색을 즉시 재독한다. ============================================================================ */ /* ── Ember (웜 앰버) ── */ :root[data-palette="ember"][data-theme="light"] { --brand: #C2410C; --brand-ink: #9A3412; --brand-wash: rgba(194, 65, 12, .07); --brand-line: rgba(194, 65, 12, .22); --bg-base: #FAF5EE; --bg-ink: #2A1810; } :root[data-palette="ember"][data-theme="dark"] { --brand: #FB8B3C; --brand-ink: #FDBA74; --brand-wash: rgba(251, 139, 60, .12); --brand-line: rgba(251, 139, 60, .30); --bg-base: #16110C; --bg-ink: #F2E2D0; } /* ── Sage (그린/틸) ── */ :root[data-palette="sage"][data-theme="light"] { --brand: #0F766E; --brand-ink: #115E4F; --brand-wash: rgba(15, 118, 110, .07); --brand-line: rgba(15, 118, 110, .22); --bg-base: #F4F8F5; --bg-ink: #12241C; } :root[data-palette="sage"][data-theme="dark"] { --brand: #34D399; --brand-ink: #6EE7B7; --brand-wash: rgba(52, 211, 153, .12); --brand-line: rgba(52, 211, 153, .30); --bg-base: #0E1512; --bg-ink: #D8EEE3; } /* ── Plum (퍼플/바이올렛) ── */ :root[data-palette="plum"][data-theme="light"] { --brand: #6D28D9; --brand-ink: #5B21B6; --brand-wash: rgba(109, 40, 217, .07); --brand-line: rgba(109, 40, 217, .22); --bg-base: #F7F5FB; --bg-ink: #1E1233; } :root[data-palette="plum"][data-theme="dark"] { --brand: #A78BFA; --brand-ink: #C4B5FD; --brand-wash: rgba(167, 139, 250, .12); --brand-line: rgba(167, 139, 250, .30); --bg-base: #141019; --bg-ink: #E7DEF7; } /* ── Rose (로즈/핑크) ── */ :root[data-palette="rose"][data-theme="light"] { --brand: #DB2777; --brand-ink: #BE185D; --brand-wash: rgba(219, 39, 119, .07); --brand-line: rgba(219, 39, 119, .22); --bg-base: #FBF4F7; --bg-ink: #2A1020; } :root[data-palette="rose"][data-theme="dark"] { --brand: #F472B6; --brand-ink: #F9A8D4; --brand-wash: rgba(244, 114, 182, .12); --brand-line: rgba(244, 114, 182, .30); --bg-base: #171015; --bg-ink: #F5DDE9; }