:root {
  /* Foundation: neutral surfaces keep shared context legible before any state. */
  --color-canvas: #f7f7f9;
  --color-surface: #ffffff;
  --color-surface-subtle: #f2f2f6;
  --color-surface-hover: #fafaff;
  --color-ink: #24242b;
  --color-ink-secondary: #5f5f6b;
  --color-ink-tertiary: #70707d;
  --color-ink-ghost: #9696a2;
  --color-line: #e4e4e9;
  --color-line-strong: #d4d4dc;

  /* Semantic accents: violet is reserved for a person's direct judgment. */
  --color-human: #6657d8;
  --color-human-strong: #5144bd;
  --color-human-wash: #f0efff;
  --color-accepted: #27845c;
  --color-accepted-wash: #edf9f3;
  --color-waiting: #a66b13;
  --color-waiting-wash: #fff7e7;
  --color-handoff: #5a6878;
  --color-handoff-wash: #f0f3f7;
  --color-danger: #bb4f4f;
  --color-danger-wash: #fff1f1;

  /* Compatibility aliases: component styles use the semantic vocabulary below. */
  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-subtle: var(--color-surface-subtle);
  --surface-hover: var(--color-surface-hover);
  --text: var(--color-ink);
  --text-soft: var(--color-ink-secondary);
  /* This remains safe for ordinary 11–12px product metadata on white. */
  --text-faint: var(--color-ink-tertiary);
  /* Decorative labels only. Never use for a control name or essential status. */
  --text-ghost: var(--color-ink-ghost);
  --border: var(--color-line);
  --border-strong: var(--color-line-strong);
  --violet: var(--color-human);
  --violet-deep: var(--color-human-strong);
  --violet-wash: var(--color-human-wash);
  --green: var(--color-accepted);
  --green-wash: var(--color-accepted-wash);
  --amber: var(--color-waiting);
  --amber-wash: var(--color-waiting-wash);
  --slate: var(--color-handoff);
  --slate-wash: var(--color-handoff-wash);
  --danger: var(--color-danger);
  --danger-wash: var(--color-danger-wash);

  --font-ui: 'SUIT', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', 'SF Mono', 'Cascadia Code', 'Roboto Mono', ui-monospace, monospace;
  --type-label: 11px;
  --type-meta: 12px;
  --type-body: 14px;
  --type-title: clamp(25px, 3vw, 34px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(24, 24, 32, .04), 0 6px 20px rgba(24, 24, 32, .035);
  --shadow-float: 0 18px 48px rgba(24, 24, 32, .14), 0 3px 9px rgba(24, 24, 32, .06);
  --focus-ring: 0 0 0 3px rgba(102, 87, 216, .27);
  --ease: cubic-bezier(.2, .75, .25, 1);
  --duration-fast: 160ms;
  --duration-base: 220ms;
}

[data-tone='human'] { --tone: var(--violet); --tone-bg: var(--violet-wash); }
[data-tone='waiting'] { --tone: var(--amber); --tone-bg: var(--amber-wash); }
[data-tone='handoff'] { --tone: var(--slate); --tone-bg: var(--slate-wash); }
[data-tone='review'] { --tone: var(--green); --tone-bg: var(--green-wash); }
[data-tone='quiet'] { --tone: var(--text-soft); --tone-bg: var(--surface-subtle); }