/**
 * TOOMCARD Design Tokens
 * 모든 페이지가 공유하는 색·서체·간격. 페이지별 CSS는 이 변수를 참조한다.
 * 강조색은 골드 하나만 쓴다. 보라/핑크는 보조(그라데이션 텍스트 등)로만.
 */
:root {
  /* 배경 */
  --tc-bg: #07050d;
  --tc-bg-elevated: #0d0a17;
  --tc-surface: rgba(255, 255, 255, 0.03);
  --tc-surface-hover: rgba(255, 255, 255, 0.06);

  /* 선 */
  --tc-border: rgba(255, 255, 255, 0.08);
  --tc-border-strong: rgba(255, 255, 255, 0.18);

  /* 글자 */
  --tc-text: #ffffff;
  --tc-text-muted: rgba(255, 255, 255, 0.65);
  --tc-text-subtle: rgba(255, 255, 255, 0.4);

  /* 강조 */
  --tc-accent: #ffd978;
  --tc-accent-strong: #f59e0b;
  --tc-accent-soft: rgba(255, 217, 120, 0.12);
  --tc-accent-border: rgba(255, 217, 120, 0.35);
  --tc-accent-glow: rgba(255, 217, 120, 0.25);

  /* 보조 (브랜드 그라데이션 전용) */
  --tc-violet: #c084fc;
  --tc-pink: #ec4899;

  /* 상태 */
  --tc-success: #34d399;
  --tc-danger: #f87171;

  /* 서체 */
  --tc-font-body: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tc-font-display: 'Montserrat', var(--tc-font-body);

  /* 간격 */
  --tc-space-1: 4px;
  --tc-space-2: 8px;
  --tc-space-3: 12px;
  --tc-space-4: 16px;
  --tc-space-6: 24px;
  --tc-space-8: 32px;
  --tc-space-12: 48px;

  /* 라운드 */
  --tc-radius-sm: 8px;
  --tc-radius: 12px;
  --tc-radius-lg: 16px;
  --tc-radius-xl: 24px;

  /* 그림자 */
  --tc-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --tc-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);

  /* 기존 페이지 변수와의 연결 (landing.css, templates.html, maker.html) */
  --accent-gold: var(--tc-accent);
  --accent-gold-glow: var(--tc-accent-glow);
  --accent-purple: var(--tc-violet);
  --accent-pink: var(--tc-pink);
  --bg-primary: var(--tc-bg);
  --bg-page: var(--tc-bg);
  --bg-secondary: var(--tc-bg-elevated);
  --bg-surface: var(--tc-surface);
  --bg-card: var(--tc-surface);
  --bg-card-hover: var(--tc-surface-hover);
  --border-subtle: var(--tc-border);
  --border-accent: var(--tc-accent-border);
  --text-main: var(--tc-text);
  --text-muted: var(--tc-text-muted);
  --text-subtle: var(--tc-text-subtle);
  --font-body: var(--tc-font-body);
  --font-heading: var(--tc-font-display);
  --maker-bg: var(--tc-bg);
  --maker-panel: rgba(13, 10, 24, 0.75);
  --maker-border: var(--tc-border);
  --maker-accent: var(--tc-accent);
  --maker-glow: var(--tc-accent-glow);
}

/* 언어 전환 스위처 (i18n.js가 [data-i18n-switcher] 안에 렌더링) */
.tc-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-surface);
}
.tc-lang-switcher button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--tc-text-subtle);
  font: 700 11px/1 var(--tc-font-body);
  letter-spacing: 0.3px;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.tc-lang-switcher button:hover {
  color: var(--tc-text);
}
.tc-lang-switcher button[aria-pressed="true"] {
  color: #000;
  background: var(--tc-accent);
}