/* DESIGN.md 에서 옮긴 값. 여기에는 값만 두고 규칙은 두지 않는다.
   값을 바꾸면 tests/tokens.test.js 와 tests/contrast.test.js 가 실패한다.
   색을 바꾸려면 DESIGN.md 를 먼저 고치고, 대비를 다시 계산할 것. */
:root {
  /* ── 표면 ───────────────────────────────────
     깊이는 그림자가 아니라 표면 밝기로 만든다. base 가 가장 뒤. */
  --color-surface-base: #000000;
  --color-surface-muted: #0b1210;
  --color-surface-raised: #131c18;
  --color-surface-overlay: #1b2723;

  /* ── 액센트 ─────────────────────────────────
     구조를 칠하는 유일한 색. 장식으로 흩뿌리지 않는다. */
  --color-accent: #34d399;
  --color-accent-strong: #10b981;
  --color-accent-soft: rgba(52, 211, 153, 0.12);

  /* ── 글자 ───────────────────────────────────
     전부 surface-raised 위에서 WCAG AA 이상. 괄호는 실측 대비. */
  --color-text-primary: #e8f1ec;    /* 15.10:1 AAA */
  --color-text-secondary: #9fb5ab;  /*  8.01:1 AAA */
  --color-text-muted: #78918a;      /*  5.15:1 AA  */
  --color-text-accent: #a7f3d0;     /* 13.57:1 AAA */
  --color-text-on-accent: #04150f;  /*  9.76:1 on --color-accent */

  /* ── 테두리 ─────────────────────────────────
     subtle/default 는 장식. strong 은 테두리가 유일한 식별 수단일 때
     쓰며 비텍스트 대비 3:1 을 넘긴다 (4.48:1). */
  --color-border-subtle: rgba(52, 211, 153, 0.10);
  --color-border-default: rgba(52, 211, 153, 0.18);
  --color-border-strong: #3f8f78;

  /* ── 상태 ───────────────────────────────────*/
  --color-danger: #fb7185;          /*  6.46:1 AA */

  /* ── 간격: 4px 기준 ─────────────────────────*/
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* ── 라운드 ─────────────────────────────────*/
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── 타이포 ─────────────────────────────────*/
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, sans-serif;
  /* 패널 코드(SES-01)와 시각처럼 자리가 고정돼야 읽기 쉬운 값에 쓴다 */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── 깊이 ───────────────────────────────────
     inset 헤어라인이 표면 윗변을 긋고, 드롭이 바닥에서 띄운다. */
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.06),
              0 12px 26px rgba(0, 0, 0, 0.45);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 18px 44px rgba(0, 0, 0, 0.55);

  /* ── 모션 ───────────────────────────────────*/
  --motion-instant: 150ms;
  --motion-fast: 200ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ── 레이아웃 ───────────────────────────────*/
  --container-max: 1080px;

  color-scheme: dark;
}

/* 모션을 줄여달라는 설정을 존중한다. 접근성 요구사항이다. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-fast: 0ms;
  }
}