/* 사내 직원 대상 빙고 웹앱 — Noto Sans KR + Soft Blue 디자인 토큰 */
:root {
  /* ============ Colors ============ */
  /* primary accent — Soft Blue (인스타 톤보다 한 단계 진함) */
  --color-primary:        #7DAEDB;
  --color-primary-active: #5995C7;   /* 누름 상태 더 진한 변형 */
  --color-primary-on:     #FFFFFF;
  --color-primary-focus:  #5995C7;

  /* text */
  --color-ink:            #1d1d1f;
  --color-body:           #1d1d1f;
  --color-body-on-dark:   #ffffff;
  --color-ink-muted-80:   #333333;
  --color-ink-muted-48:   #7a7a7a;
  --color-text-muted:     #8E8E8E;   /* 소제목/안내 회색 */

  /* surfaces */
  --color-canvas:           #ffffff;
  --color-canvas-parchment: #ffffff;  /* 폐기 — white로 통일 */
  --color-surface-pearl:    #fafafc;
  --color-surface-tile-1:   #272729;
  --color-surface-tile-2:   #2a2a2c;
  --color-surface-tile-3:   #252527;
  --color-surface-black:    #000000;
  --color-chip-translucent: rgba(210, 210, 215, 0.64);

  /* inputs */
  --color-input-bg:     #FAFAFA;
  --color-input-border: #E5E5E5;

  /* hairlines */
  --color-divider-soft: #f0f0f0;
  --color-hairline:     #e0e0e0;

  --on-primary: #ffffff;
  --on-dark:    #ffffff;

  /* ============ Radii ============ */
  --r-none: 0px;
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-pill: 9999px;

  /* ============ Spacing — base 8 ============ */
  --s-xxs: 4px;
  --s-xs:  8px;
  --s-sm:  12px;
  --s-md:  17px;
  --s-lg:  24px;
  --s-xl:  32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* ============ Fonts ============ */
  --ff-display: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-text:    "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* product imagery shadow (사진 전용) */
  --shadow-product: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);

  /* layout */
  --content-max: 480px;
  --global-bar-h: 52px;
}