/* ======================================================================== * scoopframe-tokens.css — 스쿱프레임 기본 디자인 토큰 * - light 베이스 + 8 hue 변형 + dark 베이스 + dark×hue * - data-hue / data-theme 속성으로 전환 * - 프로젝트별 override 는 site-theme.css 에서 (이 파일 직접 편집 X) * ======================================================================== */ /* ── 0. 디자인 토큰 (light 기본) ───────────────────── * palette: slate 패밀리(neutral) + brand-hue 토큰 * 3-tier text · 3-tier border · 4 semantic(success/warn/danger/info) */ :root { /* Neutral surfaces */ --bg: #ffffff; --bg-elevated: #f8fafc; --bg-panel: #ffffff; --bg-inset: #f1f5f9; --bg-terminal: #020617; --card-bg: #ffffff; /* Text */ --text: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-faint: #94a3b8; --text-inverse: #ffffff; /* Borders */ --border-subtle: #f1f5f9; --border: #e2e8f0; --border-strong: #94a3b8; --border-soft: var(--border-subtle); /* Brand (기본 hue=slate). 다른 hue 는 아래 [data-hue=*] 블록에서 override */ --brand-accent: #334155; --brand-accent-2: #475569; --brand-accent-soft: rgba(51, 65, 85, 0.06); --brand-accent-fg: #ffffff; --brand-accent-strong: var(--brand-accent-2); /* Accent warm (LIVE/시간성 신호) */ --accent-warm: #d97706; --accent-warm-soft: #f59e0b; --accent-warm-bg: rgba(217, 119, 6, 0.08); --accent-warm-border: rgba(217, 119, 6, 0.30); /* Semantic */ --success: #10b981; --success-soft: rgba(16, 185, 129, 0.12); --warn: #d97706; --warn-soft: rgba(217, 119, 6, 0.12); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.12); --info: #0e7490; --info-soft: rgba(14, 116, 144, 0.12); /* Surface tints */ --bg-tint-cool: #f0fbff; --bg-tint-warm: #fffbeb; /* 기하 */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 12px 28px -8px rgba(15, 23, 42, 0.10); --shadow-lg: 0 4px 14px rgba(15, 23, 42, 0.16); --radius: 8px; --radius-sm: 6px; --gap: 16px; /* Typography */ --font-sans: -apple-system, "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; } /* ── 0b. hue 변형 (data-hue 속성 또는 :root override) ──────────── * 한 줄로 brand 톤 전환. */ [data-hue="sky"] { --brand-accent: #0284c7; --brand-accent-2: #0369a1; --brand-accent-soft: rgba(2, 132, 199, 0.08); --brand-accent-strong: #0369a1; } [data-hue="emerald"] { --brand-accent: #047857; --brand-accent-2: #065f46; --brand-accent-soft: rgba(4, 120, 87, 0.08); --brand-accent-strong: #065f46; } [data-hue="amber"] { --brand-accent: #b45309; --brand-accent-2: #92400e; --brand-accent-soft: rgba(180, 83, 9, 0.08); --brand-accent-strong: #92400e; } [data-hue="rose"] { --brand-accent: #be123c; --brand-accent-2: #9f1239; --brand-accent-soft: rgba(190, 18, 60, 0.08); --brand-accent-strong: #9f1239; } [data-hue="violet"] { --brand-accent: #6d28d9; --brand-accent-2: #5b21b6; --brand-accent-soft: rgba(109, 40, 217, 0.08); --brand-accent-strong: #5b21b6; } [data-hue="cyan"] { --brand-accent: #0e7490; --brand-accent-2: #155e75; --brand-accent-soft: rgba(14, 116, 144, 0.08); --brand-accent-strong: #155e75; } [data-hue="indigo"] { --brand-accent: #4338ca; --brand-accent-2: #3730a3; --brand-accent-soft: rgba(67, 56, 202, 0.08); --brand-accent-strong: #3730a3; } /* ── 0c. Dark 테마 ─────────────────────────────── */ [data-theme="dark"] { --bg: #0f172a; --bg-elevated: #1e293b; --bg-panel: #1e293b; --bg-inset: #0f172a; --bg-terminal: #020617; --card-bg: var(--bg-panel); --text: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --text-inverse: #0f172a; --border-subtle: #1e293b; --border: #334155; --border-strong: #475569; --border-soft: var(--border-subtle); /* 기본 dark brand (slate hue) — 다른 hue 는 아래 override */ --brand-accent: #94a3b8; --brand-accent-2: #cbd5e1; --brand-accent-soft: rgba(148, 163, 184, 0.10); --brand-accent-fg: #0f172a; --brand-accent-strong: var(--brand-accent-2); --accent-warm: #fbbf24; --accent-warm-soft: #fcd34d; --accent-warm-bg: rgba(251, 191, 36, 0.10); --accent-warm-border: rgba(251, 191, 36, 0.30); --success-soft: rgba(16, 185, 129, 0.18); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.18); --danger-soft: rgba(239, 68, 68, 0.18); --info: #22d3ee; --info-soft: rgba(34, 211, 238, 0.18); --bg-tint-cool: #0a1822; --bg-tint-warm: #1f1908; --shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px -10px rgba(0, 0, 0, 0.55); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); } [data-theme="dark"][data-hue="sky"] { --brand-accent: #38bdf8; --brand-accent-2: #7dd3fc; --brand-accent-soft: rgba(56, 189, 248, 0.12); --brand-accent-strong: #7dd3fc; } [data-theme="dark"][data-hue="emerald"] { --brand-accent: #34d399; --brand-accent-2: #6ee7b7; --brand-accent-soft: rgba(52, 211, 153, 0.12); --brand-accent-strong: #6ee7b7; } [data-theme="dark"][data-hue="amber"] { --brand-accent: #fbbf24; --brand-accent-2: #fcd34d; --brand-accent-soft: rgba(251, 191, 36, 0.12); --brand-accent-strong: #fcd34d; } [data-theme="dark"][data-hue="rose"] { --brand-accent: #fb7185; --brand-accent-2: #fda4af; --brand-accent-soft: rgba(251, 113, 133, 0.12); --brand-accent-strong: #fda4af; } [data-theme="dark"][data-hue="violet"] { --brand-accent: #a78bfa; --brand-accent-2: #c4b5fd; --brand-accent-soft: rgba(167, 139, 250, 0.12); --brand-accent-strong: #c4b5fd; } [data-theme="dark"][data-hue="cyan"] { --brand-accent: #22d3ee; --brand-accent-2: #67e8f9; --brand-accent-soft: rgba(34, 211, 238, 0.12); --brand-accent-strong: #67e8f9; } [data-theme="dark"][data-hue="indigo"] { --brand-accent: #818cf8; --brand-accent-2: #a5b4fc; --brand-accent-soft: rgba(129, 140, 248, 0.12); --brand-accent-strong: #a5b4fc; }