/* 한끼패스 디자인 토큰 — DESIGN.md §2, §3, §5, §6 기준
   값을 여기서만 바꾼다. 컴포넌트 CSS에 raw hex를 직접 쓰지 않는다. */

:root {
  /* ---- Color (DESIGN.md §2) ---- */
  --c-canvas: #ffffff;
  --c-ink: #000000;
  --c-heading: #212224;
  --c-muted: #555969;
  --c-hairline: #f2f3f7;
  --c-control-border: #c8cad2;
  --c-panel-border: #e4e5ed;
  --c-primary: #92fa72;
  --c-on-primary: #212224;
  --c-dark: #212224;
  --c-on-dark: #ffffff;
  --c-panel: #fafafc;

  /* 상태색 — 요구사항 FR-KSK-003 / §10.1이 성공·중복·거부를 색으로 구분하도록
     요구해 도입했다. 키오스크 결과 화면과 상태 배지에만 쓴다. (DESIGN.md §14) */
  --c-warn: #f07000;
  --c-on-warn: #ffffff;
  --c-danger: #d93025;
  --c-on-danger: #ffffff;

  /* ---- Typography (DESIGN.md §3) ---- */
  --font-ui: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  --t-hero-size: 40px;
  --t-hero-lh: 52px;
  --t-title-size: 36px;
  --t-title-lh: 44px;
  --t-search-size: 20px;
  --t-search-lh: 28px;
  --t-body-size: 16px;
  --t-body-lh: 24px;
  --t-label-size: 14px;
  --t-label-lh: 20px;
  --t-kiosk-size: 64px;

  /* ---- Spacing (DESIGN.md §5) ---- */
  --s-xxs: 2px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-base: 16px;
  --s-lg: 20px;
  --s-xl: 24px;
  --s-xxl: 32px;

  /* ---- Radius (DESIGN.md §4) ---- */
  --r-square: 0px;
  --r-cta: 4px;
  --r-control: 8px;
  --r-panel: 12px;
  --r-shell: 36px;

  /* ---- Elevation (DESIGN.md §6) ---- */
  --shadow-shell: rgba(0, 0, 0, 0.1) 0 0 20px 0;

  /* ---- Layout (DESIGN.md §5) ---- */
  --w-content: 1168px;
  --w-side: 248px;
  --h-topbar: 64px;
  --h-header: 64px;
  --h-cta: 52px;
  --h-control: 36px;
  --h-shell: 64px;

  /* ---- Motion (DESIGN.md §15) ---- */
  --motion-state: 140ms ease-out;
  --motion-enter: 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-state: 0ms linear;
    --motion-enter: 0ms linear;
  }
}