/* Boffi-inspired starter tokens — curated from .extract-design-system/raw.json (boffi.com/en, 2026-08-24).
   ABC Diatype / ABC Arizona are commercial fonts (Dinamo) — NOT bundled. Fallback stacks provided.
   Monochrome system: black / white / warm grays. Accent slot left neutral on purpose.    Last applied from guide: 2026-08-24 13:41 */
:root {
  /* Color */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-900: #333333;
  --color-gray-700: #444444;
  --color-gray-500: #60646c;
  --color-gray-200: #f1f1f1;
  --color-gray-100: #f5f5f5;
  --color-gray-50:  #f9f9f9;

  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-gray-50);
  --color-fg: var(--color-black);
  --color-fg-muted: var(--color-gray-700);
  --color-border: var(--color-black);
  --color-border-subtle: rgba(0, 0, 0, 0.4);
  --color-focus: #70b3ff;

  /* Typography */
  --font-sans: "ABC Diatype", "Helvetica Neue", Helvetica, Arial, "Pretendard", sans-serif;
  --font-serif: "ABC Arizona Text", "Times New Roman", Georgia, "Noto Serif KR", serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-serif);

  --text-xs: 0.6875rem;  /* 11px */
  --text-sm: 0.8125rem;  /* 13px  — nav / captions / buttons */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px — hero heading */
  --text-hero-sub: 2.0625rem; /* 33px — hero 본문 (boffi 실측) */

  --leading-tight: 1.06;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --tracking-caps: 0em;     /* boffi 실측: letter-spacing normal */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Spacing (8-based, with 5px micro step seen on site) */
  --space-1: 0.3125rem; /* 5px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.625rem;  /* 10px */
  --space-4: 0.9375rem; /* 15px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.875rem;  /* 30px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3.75rem;   /* 60px */
  --space-9: 5rem;      /* 80px */

  /* Radius */
  --radius-sm: 3px;     /* inputs, tabs */
  --radius-pill: 33px;  /* primary buttons */
  --radius-full: 50%;   /* icon / slider buttons */

  /* Borders & shadows */
  --border-hairline: 1px solid var(--color-border);
  --shadow-sm: rgba(0, 0, 0, 0.12) 0 7px 7px -7px;
  --shadow-lg: rgba(0, 0, 0, 0.2) 2px 8px 23px 3px;

  /* Components */
  --btn-padding: 14px 40px;
  --btn-padding-lg: 15px 30px;
  --btn-font-size: var(--text-sm);
  --btn-transform: uppercase;
  --btn-radius: var(--radius-pill);
  --btn-hover-scale: 1.05;

  /* Breakpoints (reference only — cannot be used in media queries via var()) */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl: 1400px;
}