/* Reaction Benchmark — design tokens (SSOT).
   색 리터럴이 허용되는 유일한 파일 — 게이트(check-colors)가 강제한다.
   이름은 값이 아니라 역할로 짓는다. 쓰임이 다르면 이름을 나눈다.

   방향(2026-08-02): "계측 장비". 이 사이트의 주장은 "리더보드가 아니라 발표된 연구 분포와
   비교한다"이므로, 게임기가 아니라 측정기처럼 보여야 한다 — 흑연 바탕 · 신호 앰버 ·
   데이터 시안 · 숫자는 고정폭. */
:root {
  color-scheme: dark light;

  /* surfaces & text — 흑연(graphite) */
  --color-bg: #0e1216;
  --color-surface: #151b21;
  --color-surface-raised: #1c242c;
  --color-text: #e7ebf0;
  --color-text-muted: #96a1ad;
  --color-outline: #242e37;
  --color-grid: #1b242c;          /* 계기판 격자선 — outline보다 더 조용하다 */

  /* signal — 측정 중임을 알리는 앰버(계측기 표시등) */
  --color-primary: #ffb020;
  --color-on-primary: #17130a;
  /* 앰버를 글자로 쓸 때 — 채움용 primary는 밝은 배경에서 1.69:1로 크게 미달한다(실측 2026-08-02) */
  --color-signal-text: #ffb020;

  /* data — 분포·곡선 전용(신호색과 역할이 다르다) */
  --color-data: #58c7e0;
  --color-data-fill: #58c7e029;

  /* 글자로 쓰이는 색은 배경 대비 4.5:1 이상이어야 한다(WCAG AA) */
  --color-link: #79c6f5;
  --color-success: #45d19a;
  --color-danger: #ff6b6b;

  /* 반응 스테이지 전용 — 의미색과 역할 분리 */
  --color-stage-wait: #8f3a24;
  --color-stage-go: #1a7a51;   /* 흰 글자 4.5:1 확보(계산 검증) */
  --color-on-stage: #ffffff;

  /* radius — 장비는 각이 살아 있다 */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* type scale */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.55rem;
  --text-hero: clamp(2rem, 6vw, 2.9rem);
  --text-readout: clamp(2.6rem, 9vw, 4rem);

  /* 글꼴 — 숫자가 이 제품의 본체다. 데이터·라벨은 고정폭으로 읽는다.
     외부 폰트를 받지 않는다(요청 0 · 성능 100 유지). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-surface-raised: #eceef2;
    --color-text: #131820;
    --color-text-muted: #5a6472;
    --color-outline: #d5dae1;
    --color-grid: #e6e9ee;
    /* 밝은 배경에서 글자로 쓰이는 색만 어둡게 — 채움색(--color-primary)은 그대로 둔다 */
    --color-link: #1a63b8;
    --color-success: #0f7a4f;
    --color-danger: #c62828;
    --color-data: #1a7189;
    --color-data-fill: #1d7f9921;
    --color-on-primary: #17130a;
    --color-signal-text: #9a6100;
  }
}