/* 사용자 요청 (2026-10-12): "index 페이지 HTML 구현 시작하자"
 * docs/DesignTokens.md 의 토큰을 그대로 옮긴 파일이다. 여기에 없는 값은 쓰지 않는다.
 * 값을 바꿀 때는 DesignTokens.md 를 먼저 고친다. */
:root {
  /* Primitive colors */
  --teal-600: #007d79;

  --neutral-000: #ffffff;
  --neutral-050: #f5f6f5;
  --neutral-100: #e8e8e8;
  --neutral-200: #dde1e0;
  --neutral-500: #525252;
  --neutral-900: #161616;

  /* Semantic colors */
  --color-bg-page: var(--neutral-050);
  --color-surface: var(--neutral-000);
  --color-surface-subtle: var(--neutral-050);
  --color-border: var(--neutral-200);
  --color-border-strong: #8d8d8d;

  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-500);
  --color-text-muted: #6f6f6f;

  --color-primary: var(--teal-600);
  --color-primary-hover: #006b68;
  --color-primary-active: #004144;
  --color-primary-contrast: var(--neutral-000);

  --color-focus: #005d5d;
  --color-success: #24a148;
  --color-warning: #f1c21b;
  --color-danger: #da1e28;

  /* Typography */
  --font-heading: "IBM Plex Serif", Georgia, serif;
  --font-body: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs-size: 12px;
  --text-xs-line: 16px;
  --text-sm-size: 14px;
  --text-sm-line: 24px;
  --text-md-size: 16px;
  --text-md-line: 24px;
  --text-lg-size: 20px;
  --text-lg-line: 32px;
  --text-xl-size: 24px;
  --text-xl-line: 32px;
  --text-2xl-size: 32px;
  --text-2xl-line: 40px;
  --text-3xl-size: 40px;
  --text-3xl-line: 48px;
  --text-4xl-size: 48px;
  --text-4xl-line: 56px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* Control height */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --control-height-xl: 56px;

  /* Radius / Border */
  --radius-none: 0;
  --radius-sm: 2px;
  --border-width-default: 1px;
  --border-width-strong: 2px;

  /* Icon */
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;

  /* Layout */
  --page-max-width: 1312px;
  --page-gutter-mobile: 16px;
  --page-gutter-tablet: 24px;
  --page-gutter-desktop: 32px;
  --section-gap-mobile: 48px;
  --section-gap-desktop: 96px;

  /* Shadow */
  --shadow-raised: 4px 4px 0 rgba(0, 0, 0, 0.10);
  --shadow-modal: 8px 8px 0 rgba(0, 0, 0, 0.16);

  /* Motion */
  --duration-fast: 110ms;
  --duration-normal: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* Locale-Overridden Typography (DesignTokens.md §2.5)
 * 한글 큰 제목 글꼴은 미정 — 정해질 때까지 설치된 명조 계열을 쓴다. */
html[lang="ko"] {
  --font-heading: "Source Han Serif KR", "Noto Serif KR", "Nanum Myeongjo", serif;
  --font-body: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
}