/* HMDESIGN foundation tokens. Evidence and ranges: design-system/foundation.md.
 * Brands override values in their own stylesheet; colors are brand decisions and are not set here.
 * Choose one radius grammar on <html data-hm-radius="sharp|medium|soft">.
 */
:root {
  --hm-font-korean: 'Pretendard', 'SUIT', 'IBM Plex Sans KR', 'Noto Sans KR', system-ui, sans-serif;

  /* Type scale (px): 12 14 16 18 20 24 32 40 52 64 80 */
  --hm-text-12: 0.75rem;
  --hm-text-14: 0.875rem;
  --hm-text-16: 1rem;
  --hm-text-18: 1.125rem;
  --hm-text-20: 1.25rem;
  --hm-text-24: 1.5rem;
  --hm-text-32: 2rem;
  --hm-text-40: 2.5rem;
  --hm-text-52: 3.25rem;
  --hm-text-64: 4rem;
  --hm-text-80: 5rem;
  --hm-leading-body: 1.7;
  --hm-leading-heading: 1.25;
  --hm-tracking-heading-ko: -0.025em;

  /* Headline tiers: pick one per brand; the largest size appears once per page. */
  --hm-headline-info: var(--hm-text-40);
  --hm-headline-brand: var(--hm-text-52);
  --hm-headline-campaign: clamp(var(--hm-text-40), 6vw, 5.5rem);

  /* Spacing: 4px base, 8px steps */
  --hm-space-1: 4px;
  --hm-space-2: 8px;
  --hm-space-3: 12px;
  --hm-space-4: 16px;
  --hm-space-6: 24px;
  --hm-space-8: 32px;
  --hm-space-12: 48px;
  --hm-space-16: 64px;
  --hm-space-24: 96px;
  --hm-space-32: 128px;
  --hm-section-dense: var(--hm-space-16);
  --hm-section-standard: var(--hm-space-24);
  --hm-section-cinematic: var(--hm-space-32);
  --hm-gutter: clamp(20px, 3.4vw, 48px);

  /* Nested containers: use at least three by role, never one max-width for everything. */
  --hm-width-frame: 1360px;
  --hm-width-content: 1200px;
  --hm-width-split: 880px;
  --hm-width-prose: 720px;
  --hm-width-measure: 560px;

  --hm-control-min: 44px;
  --hm-header-height: 64px;
}

/* Radius grammars: at most four role values per brand. */
:root,
[data-hm-radius="medium"] {
  --hm-radius-surface: 0px;
  --hm-radius-control: 8px;
  --hm-radius-card: 12px;
  --hm-radius-tag: 999px;
}

[data-hm-radius="sharp"] {
  --hm-radius-surface: 0px;
  --hm-radius-control: 0px;
  --hm-radius-card: 2px;
  --hm-radius-tag: 999px;
}

[data-hm-radius="soft"] {
  --hm-radius-surface: 0px;
  --hm-radius-control: 999px;
  --hm-radius-card: 20px;
  --hm-radius-tag: 999px;
}