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

   방향(2026-08-02): "계측 장비". 이 사이트의 주장은 "리더보드가 아니라 발표된 연구 분포와
   비교한다"이므로, 게임기가 아니라 측정기처럼 보여야 한다 — 흑연 바탕 · 신호 앰버 ·
   데이터 시안 · 숫자는 고정폭. */
:root {
  /* 기본 = 다크. 라이트는 아래 [data-theme="light"] 한 벌 — head.html이 첫 페인트 전에 data-theme를 정한다
     (저장한 선택 rb:theme, 없으면 기기 설정). 2026-10-11 다크·라이트 토글 */
  color-scheme: dark;

  /* 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: #58c7e042;

  /* 떠 있는 패널 그림자(소리 설정 등) */
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .35);

  /* 리더보드 메달색(순위 숫자·점수 전용) — Pro Max 리더보드 관례(rank-1 gold/silver/bronze).
     금은 신호 앰버와 통일(계측기 결), 은·동은 관례색 그대로. */
  --rank-gold: #ffb020;
  --rank-silver: #c0c8d0;
  --rank-bronze: #d08a52;

  /* SNS 플랫폼 브랜드색(푸터 공유 버튼 전용) — 남의 로고는 그쪽 브랜드색이 식별 신호다 */
  --brand-x: #000000;
  --brand-facebook: #1877f2;
  --brand-naver: #03c75a;
  --brand-on: #ffffff;

  /* 글자로 쓰이는 색은 배경 대비 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;
  /* 고정폭 글꼴에는 한글이 없다 — 한글 일반 글꼴을 generic monospace보다 먼저 둬야 한글 라벨이 굴림체 같은
     한글 고정폭 글꼴로 떨어져 "에 임 테 스 트"처럼 벌어져 보이지 않는다(2026-09-28 실측). 숫자·영문은 앞의 고정폭이 그대로 그린다. */
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", 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)였다. 기기 설정을 따르는 일은 이제 head.html 스크립트가 맡고,
   값은 여기 한 벌뿐이다(미디어 쿼리와 속성 선택자에 같은 값을 두 번 쓰지 않으려고).
   ponytail: 자바스크립트가 꺼진 브라우저는 기기와 상관없이 다크로 보인다(게임 자체가 JS라 감수). */
:root[data-theme="light"] {
    color-scheme: light;
    --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: #1d7f9936;
    --color-on-primary: #17130a;
    --color-signal-text: #9a6100;
}

:root {
  /* F1 변형 테마(2026-08-04) — 야간 그리드 컨셉. 다크·라이트 모두 어두운 트랙(의도된 단일 룩) */
  --f1-track: #14161c;      /* 트랙 카본 배경 */
  --f1-gantry: #0b0c10;     /* 신호등 하우징 */
  --f1-light-off: #2a2d36;  /* 꺼진 등 */
  --f1-text: #f2f3f7;       /* 다크 스테이지 위 글자(대비 ~15:1) */
  --f1-red: #e10600;        /* 레이싱 레드(점등) */
  --f1-red-glow: #e1060066; /* 점등 글로우 */
  --f1-check: #ffffff2e;    /* 체커 스트립 밝은 칸 */
}

:root {
  /* F1 신호등 입체감(2026-08-04 사장님 "저쪽이 더 신호등 같다") — 소켓 그림자·전구 하이라이트 */
  --f1-socket: #00000099;
  --f1-red-hot: #ff5147;
}

:root {
  /* F1 카드 불꽃(2026-08-04 사장님 "불꽃+일렁임+오른쪽만 날카롭게") — 애프터버너 열기 색 */
  --f1-flame: #ff9a3d;
}

:root { --f1-flame-hot: #ffd24a; } /* 불꽃 속심(노랑) — 겉불꽃은 --f1-flame·--f1-red */

:root {
  /* 스트룹 테스트(2026-10-11) — 판은 테마와 무관한 고정 다크(노랑 글자가 밝은 바탕에서 안 읽혀서 — F1 트랙과 같은 처리).
     4색은 색각 이상 시뮬레이션(Machado 2009)으로 골랐다: 색 이름 범위 안에서 4색 간 최소 색차(ΔE)를 최대화 —
     흔한 조합(#ff3b30·#34c759…)은 제2색맹에서 빨강·초록이 21까지 붙었다 → 이 조합은 제1 43 · 제2 38 · 제3 39.
     판 위 글자 대비 4색 모두 4.5:1 이상(contrast 테스트가 지킨다). 그래도 완전 색맹은 과제 자체가 불가 — 면에 예외를 적었다. */
  --stroop-bg: #14161c;
  --stroop-red: #fa212c;
  --stroop-blue: #4077ff;
  --stroop-green: #51e592;
  --stroop-yellow: #fbe12b;
  --stroop-text: #f2f3f7;    /* 판 위 안내 글자 */
  --stroop-muted: #a9b1bc;   /* 판 위 보조 글자 */
  --stroop-key: #20242d;     /* 답 버튼 바탕 */
  --stroop-key-line: #353b47;
}

:root {
  /* footer — 테마(다크/라이트)와 무관한 고정 카본. F1 카드와 같은 계열의 마감 앵커(2026-08-04 사장님 "푸터 색") */
  --foot-bg: #14161c;
  --foot-text: #e8ebf1;
  --foot-muted: #99a3ae;   /* #14161c 위 대비 ~7:1 */
  --foot-outline: #262c36;
}

:root {
  /* 카카오 공유 버튼 — 카카오 디자인 가이드 색(브랜드 식별 신호라 예외적으로 색 사용, sc-* 계열과 동일 원칙) */
  --brand-kakao: #fee500;
  --brand-kakao-text: #191919;
}

:root {
  /* 공유 카드(캔버스) 고정 팔레트 — 보는 사람 테마와 무관하게 항상 카본 다크(OG·푸터·F1과 같은 계열).
     라이트 모드 사용자가 저장한 카드가 밋밋한 흰 카드로 나오던 것 통일(사장님 2026-08-04). */
  --card-bg: #14161c;
  --card-text: #e8ebf1;
  --card-muted: #99a3ae;
  --card-outline: #262c36;
  --card-primary: #ffb020;
  --card-data: #6cc5de;
  --card-fill: #1d7f9936;
}