/* ============================================================================= tokens.css — 색상 SSOT ============================================================================= ⚠️ 색상 값은 오직 이 파일에만 리터럴로 등장해야 합니다. style.css, JS 파일 등 다른 곳에서는 var(--semantic-name) 또는 token('semantic-name') 으로만 참조하세요. scripts/check-no-hex.sh 가 이 규칙을 강제합니다. 2 계층 구조: - Scale layer : 원자값 (--cream-*, --ink-*, --terracotta-*, ...) - Semantic layer: 의미값 (--surface-*, --text-*, --brand-*, ...) 컴포넌트는 semantic 이름만 참조하세요. scale 은 semantic 정의 내부에서만. ============================================================================= */ :root { /* === Scale layer — 원자값 (의도 없음) === */ /* Cream — 웜 배경 톤 */ --cream-50: #faf9f5; /* Ivory — 카드, raised surface */ --cream-100: #f5f4ed; /* Parchment — 페이지 배경 */ --cream-200: #f0eee6; /* Border Cream — 경계선 */ --cream-300: #e8e6dc; /* Warm Sand — hover/sunken */ --cream-400: #e0ddd0; /* Deeper Sand */ /* Ink — 본문 텍스트 + 다크 surface */ --ink-950: #141413; /* Anthropic Near Black — primary text */ --ink-800: #30302e; /* Dark Surface — 다크 카드 배경 */ --ink-700: #3d3d3a; /* Dark warm — 다크 링크 */ --ink-600: #4d4c48; /* Charcoal — 밝은 배경 버튼 텍스트 */ /* Olive/Stone — 중간 회녹 (secondary/muted 텍스트) */ --olive-600: #5e5d59; --stone-400: #6b6a64; --stone-500: #87867f; /* Warm Silver — 다크 배경 위 본문 텍스트 */ --silver-500: #b0aea5; /* Ring/border warm — 따뜻한 경계선 계열 */ --cream-500: #d1cfc5; /* Ring warm */ --cream-600: #c2c0b6; /* Ring deep */ /* Pure white — 제한적 사용 (게임 HUD 등) */ --white-pure: #ffffff; /* Focus blue — 유일한 cool tone (접근성 포커스 링) */ --focus-500: #3898ec; /* Terracotta — 브랜드 색 */ --terracotta-400: #d97757; /* Coral — hover */ --terracotta-500: #c96442; /* Terracotta — primary brand */ --terracotta-600: #b35837; /* Deeper Terra — strong */ /* Status */ --error-500: #b53333; --warning-500: #d9a030; /* Amber */ --success-500: #3a7a4a; /* Forest green */ /* Chart/visualization hues (범주형 구분용, earth tones 와 별개) */ --chart-blue: #3b82f6; --chart-cyan: #38bdf8; --chart-violet: #8b5cf6; --chart-slate: #64748b; /* === Semantic layer — 컴포넌트가 참조하는 이름 === */ /* Surfaces */ --surface-page: var(--cream-100); --surface-card: var(--cream-50); --surface-raised: var(--cream-50); --surface-sunken: var(--cream-200); --surface-hover: var(--cream-300); /* Text */ --text-primary: var(--ink-950); --text-secondary: var(--olive-600); --text-muted: var(--stone-500); --text-subtle: var(--stone-400); --text-inverse: var(--cream-50); /* Borders */ --border-subtle: var(--cream-200); --border-warm: var(--cream-300); --border-strong: var(--ink-950); --border-dark: var(--ink-800); /* Rings (halo borders) */ --ring-warm: var(--cream-500); --ring-deep: var(--cream-600); /* Focus */ --focus-ring: var(--focus-500); /* Brand */ --brand-default: var(--terracotta-500); --brand-hover: var(--terracotta-400); --brand-strong: var(--terracotta-600); /* Status */ --status-error: var(--error-500); --status-warning: var(--warning-500); --status-success: var(--success-500); /* Overlays */ --overlay-modal: color-mix(in srgb, var(--ink-950) 55%, transparent); --overlay-hover-soft: color-mix(in srgb, var(--ink-950) 6%, transparent); --overlay-hover-warm: color-mix(in srgb, var(--ink-950) 12%, transparent); --overlay-brand-soft: color-mix(in srgb, var(--brand-default) 10%, transparent); --overlay-brand-mid: color-mix(in srgb, var(--brand-default) 20%, transparent); --overlay-brand-strong: color-mix(in srgb, var(--brand-default) 35%, transparent); /* === Shadows (Claude warm earth) === */ --shadow-card: 0 1px 3px color-mix(in srgb, var(--ink-950) 6%, transparent), 0 1px 2px color-mix(in srgb, var(--ink-950) 4%, transparent); --shadow-card-hover: 0 4px 12px color-mix(in srgb, var(--ink-950) 10%, transparent), 0 2px 4px color-mix(in srgb, var(--ink-950) 6%, transparent); /* === Motion === */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* === Domain: waveform canvas === */ --waveform-playhead: var(--text-primary); --waveform-divider: var(--border-subtle); --waveform-bar-line: color-mix(in srgb, var(--ink-950) 6%, transparent); --waveform-beat-line: color-mix(in srgb, var(--ink-950) 3%, transparent); --waveform-loop-border: var(--brand-default); --waveform-loop-handle: var(--brand-default); --waveform-loop-select: color-mix(in srgb, var(--brand-default) 22%, transparent); --waveform-dim-outside: color-mix(in srgb, var(--ink-950) 45%, transparent); --waveform-loop-tint: color-mix(in srgb, var(--brand-default) 8%, transparent); --waveform-handle-pill: color-mix(in srgb, var(--ink-950) 85%, transparent); --waveform-recording-line: var(--status-error); --waveform-recording-fill: color-mix(in srgb, var(--status-error) 80%, transparent); /* === Domain: guitar-play game (neon highway, tuner) === 리듬 게임 전용 네온 팔레트. Claude earth-tones 와 별개 맥락. */ /* Rocksmith 6-string colors (E-A-D-G-B-e) */ --game-string-1: #ff3355; --game-string-2: #ffcc00; --game-string-3: #4488ff; --game-string-4: #ff8800; --game-string-5: #00dd66; --game-string-6: #cc44ff; /* Tuner / gauge neon accents */ --neon-purple: #7c5cfc; --neon-purple-deep: #6a4cf0; --neon-gold: #f5d76e; --neon-amber: #ffd700; --neon-orange: #ff8800; --neon-magenta: #ff00aa; --neon-pink: #ff3355; --neon-violet: #aa44ff; --neon-blue: #4488ff; --neon-blue-mid: #4d96ff; --neon-blue-deep: #4466ff; --neon-cyan: #00f0ff; --neon-green: #00ff88; /* Highway dark background gradients */ --game-bg-deep: #1a1030; --game-bg-mid: #2a2240; --game-bg-lift: #3a2a6a; --game-bg-dawn: #1a1528; --game-bg-abyss: #08060e; --game-bg-night: #0d0a16; --game-bg-card: #13101f; /* Song card gradient endpoints (곡 카드 아트워크) */ --game-card-purple-end: #2a1540; --game-card-blue-start: #0a1828; --game-card-blue-end: #1a2838; /* Highway renderer — Three.js scene (neon fretboard, dots, fret bars) */ --game-fog: #060410; /* 깊은 청흑 안개 */ --game-fretboard: #1a1210; /* 지판 바닥 */ --game-fret-nut: #dcdcdc; /* 넛 프렛 (밝은 회색) */ --game-fret-bar: #8c82aa; /* 일반 프렛 바 */ --game-inlay: #999999; /* 넛 inlay */ --game-fret-dot-dim: #3c3255; /* 어두운 fret dot */ --game-fret-dot: #b4a0dc; /* 일반 fret dot (보라) */ --game-fret-label: #c8b4ff; /* fret 번호 라벨 (cool violet) */ /* Canvas texture glow stops (Three.js CanvasTexture) */ --game-glow-label: color-mix(in srgb, var(--game-fret-label) 60%, transparent); --game-glow-bright: color-mix(in srgb, var(--white-pure) 50%, transparent); --game-glow-mid: color-mix(in srgb, var(--white-pure) 12%, transparent); --game-glow-fade: color-mix(in srgb, var(--white-pure) 0%, transparent); /* Cool muted text for dark UI (tuner labels, dim captions) */ --game-text-dim: #9ca3c2; --game-text-muted: #6b6894; --game-text-hint: #c0c4dc; --game-text-cool: #dfe3f0; --game-text-cold: #f0f2ff; --game-warmwood: #a97b65; /* === Domain: chart section labels (AI 섹션 감지 시각화) === 원곡 구조 라벨별 컬러 — verse/chorus 등을 구분하기 위한 범주형 팔레트. 이 값들은 Claude earth-tones 과 별개의 visualization hue 로 취급. */ --chart-section-intro: #3b82f6; /* Blue — 도입 */ --chart-section-verse: #10b981; /* Green — 절 */ --chart-section-pre-chorus: #f59e0b; /* Amber — 프리코러스 */ --chart-section-chorus: #ef4444; /* Red — 후렴 */ --chart-section-bridge: #8b5cf6; /* Violet — 브리지 */ --chart-section-outro: #6366f1; /* Indigo — 아웃로 */ --chart-section-inst: #64748b; /* Slate — 연주 구간 */ --chart-section-silence: #374151; /* Gray — 무음 */ --chart-section-default: #6b7280; /* Gray — 미분류 */ /* === Domain: stem separation (악기별 아이콘) === */ --stem-vocals-bg: #f4e0da; --stem-vocals-fg: #b8553b; --stem-drums-bg: #f5eacd; --stem-drums-fg: #a67b1e; --stem-bass-bg: #dce8fa; --stem-bass-fg: #3670c9; --stem-piano-bg: #e8dff7; --stem-piano-fg: #7044b5; --stem-guitar-bg: #d9eddf; --stem-guitar-fg: #2d6b3d; /* === Domain: guitar-play 곡 아트 그래디언트 === */ --gp-art-terra-from: #b8553b; --gp-art-terra-to: #c96442; --gp-art-blue-from: #3670c9; --gp-art-blue-to: #5b8fd9; --gp-art-violet-from:#7044b5; --gp-art-violet-to: #9066cc; --gp-art-green-from: #3a7a4a; --gp-art-green-to: #4d9960; /* === Domain: alphaTab stave === */ --stave-line: color-mix(in srgb, var(--ink-950) 25%, transparent); --stave-separator: color-mix(in srgb, var(--ink-950) 35%, transparent); --stave-glyph-primary: var(--text-primary); --stave-glyph-secondary: var(--text-secondary); --stave-glyph-meta: var(--text-muted); --stave-bar-number: var(--brand-default); --stave-cursor-bar: color-mix(in srgb, var(--brand-default) 10%, transparent); --stave-cursor-beat: color-mix(in srgb, var(--brand-default) 45%, transparent); }