/*
 * 디자인 토큰 (docs/DESIGN.md front matter와 1:1).
 * 값을 바꿀 때는 DESIGN.md를 먼저 고치고 `designmd lint`를 통과시킨 뒤 이 파일에 옮긴다.
 * 이름 규칙: DESIGN.md `colors.primary` -> `--gw-primary`, `spacing.row-height` -> `--gw-row-height`.
 */
:root {
  color-scheme: light;

  /* colors */
  --gw-primary: #2B3A8C;
  --gw-primary-hover: #222F73;
  --gw-primary-subtle: #E8EBF7;
  --gw-secondary: #475569;
  --gw-neutral: #F4F6FA;
  --gw-surface: #FFFFFF;
  --gw-surface-muted: #F8FAFC;
  --gw-on-surface: #0F172A;
  --gw-on-surface-muted: #536175;
  --gw-border: #E2E8F0;
  --gw-border-strong: #CBD5E1;
  --gw-success: #15803D;
  --gw-success-subtle: #DCFCE7;
  --gw-warning: #B45309;
  --gw-warning-subtle: #FEF3C7;
  --gw-error: #B91C1C;
  --gw-error-subtle: #FEE2E2;

  /* Bootstrap은 링크·강조 계열 색을 `r, g, b` 값으로 받는다. 위 hex와 같은 색의 파생 표기. */
  --gw-primary-rgb: 43, 58, 140;
  --gw-primary-hover-rgb: 34, 47, 115;
  --gw-on-surface-rgb: 15, 23, 42;
  --gw-neutral-rgb: 244, 246, 250;
  --gw-surface-rgb: 255, 255, 255;

  /* typography */
  --gw-font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
  --gw-text-body-md: 14px;
  --gw-text-body-sm: 13px;
  --gw-text-label-md: 13px;
  --gw-text-caption: 12px;
  --gw-text-headline-sm: 16px;
  --gw-text-headline-md: 20px;

  /* rounded */
  --gw-rounded-sm: 4px;
  --gw-rounded-md: 8px;
  --gw-rounded-lg: 12px;
  --gw-rounded-full: 9999px;

  /* spacing */
  --gw-space-xs: 4px;
  --gw-space-sm: 8px;
  --gw-space-md: 16px;
  --gw-space-lg: 24px;
  --gw-space-xl: 32px;
  --gw-row-height: 40px;
  --gw-touch-target: 44px;
  --gw-header-height: 48px;
  --gw-sidebar-width: 248px;
  --gw-tabbar-height: 56px;
}

/*
 * 다크 대응 자리 (D-32). 첫 출시는 라이트 전용이라 값이 라이트와 같다.
 * 다크 모드를 구현할 때 이 블록의 색 값만 바꾼다(사용처 변경 없음). 지금은 Deferred.
 */
[data-bs-theme=dark] {
  color-scheme: light;

  --gw-primary: #2B3A8C;
  --gw-primary-hover: #222F73;
  --gw-primary-subtle: #E8EBF7;
  --gw-secondary: #475569;
  --gw-neutral: #F4F6FA;
  --gw-surface: #FFFFFF;
  --gw-surface-muted: #F8FAFC;
  --gw-on-surface: #0F172A;
  --gw-on-surface-muted: #536175;
  --gw-border: #E2E8F0;
  --gw-border-strong: #CBD5E1;
  --gw-success: #15803D;
  --gw-success-subtle: #DCFCE7;
  --gw-warning: #B45309;
  --gw-warning-subtle: #FEF3C7;
  --gw-error: #B91C1C;
  --gw-error-subtle: #FEE2E2;

  --gw-primary-rgb: 43, 58, 140;
  --gw-primary-hover-rgb: 34, 47, 115;
  --gw-on-surface-rgb: 15, 23, 42;
  --gw-neutral-rgb: 244, 246, 250;
  --gw-surface-rgb: 255, 255, 255;
}