/* =====================================================================
   디자인 토큰 — 프로젝트 문서 applestyle.md 를 CSS 변수로 옮긴 것
   규칙: 화면 코드에서는 hex 값을 직접 쓰지 말고 이 변수만 사용합니다.
   ===================================================================== */
:root {
  /* Brand & Accent — 상호작용 색은 Action Blue 하나뿐 */
  --color-primary: #0066cc;          /* {colors.primary} 링크·버튼 */
  --color-primary-focus: #0071e3;    /* {colors.primary-focus} 키보드 포커스 링 */
  --color-primary-on-dark: #2997ff;  /* {colors.primary-on-dark} 어두운 타일 위 링크 */

  /* Surface */
  --color-canvas: #ffffff;               /* {colors.canvas} */
  --color-canvas-parchment: #f5f5f7;     /* {colors.canvas-parchment} */
  --color-surface-pearl: #fafafc;        /* {colors.surface-pearl} */
  --color-surface-tile-1: #272729;       /* {colors.surface-tile-1} */
  --color-surface-tile-2: #2a2a2c;       /* {colors.surface-tile-2} */
  --color-surface-tile-3: #252527;       /* {colors.surface-tile-3} */
  --color-surface-black: #000000;        /* {colors.surface-black} 글로벌 내비 */
  --color-chip-translucent: rgba(210, 210, 215, 0.64); /* {colors.surface-chip-translucent} */
  --color-parchment-80: rgba(245, 245, 247, 0.8);      /* 프로스티드 서브내비 */

  /* Text */
  --color-ink: #1d1d1f;              /* {colors.ink} */
  --color-on-dark: #ffffff;          /* {colors.body-on-dark} */
  --color-body-muted: #cccccc;       /* {colors.body-muted} 어두운 타일 보조 문구 */
  --color-ink-muted-80: #333333;     /* {colors.ink-muted-80} */
  --color-ink-muted-48: #7a7a7a;     /* {colors.ink-muted-48} 캡션·법적 고지 */

  /* Hairlines */
  --color-divider-soft: #f0f0f0;     /* {colors.divider-soft} */
  --color-hairline: #e0e0e0;         /* {colors.hairline} */
  --color-hairline-alpha: rgba(0, 0, 0, 0.08);
  --color-hairline-on-dark: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Inter, system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Radius */
  --rounded-none: 0;
  --rounded-xs: 5px;
  --rounded-sm: 8px;
  --rounded-md: 11px;
  --rounded-lg: 18px;
  --rounded-pill: 9999px;

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

  /* Layout */
  --w-text: 980px;
  --w-wide: 1440px;
  --gutter: 22px;
  --h-global-nav: 44px;
  --h-sub-nav: 52px;

  /* Elevation — 그림자는 '제품(이미지)'에만 단 하나 */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --blur-frosted: saturate(180%) blur(20px);

  /* Motion */
  --press-scale: scale(0.95);
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
}