:root {
  --brg-color-orange-50: #fff7ed;
  --brg-color-orange-500: #f57102;
  --brg-color-orange-700: #c2410c;
  --brg-color-orange-800: #9a3412;
  --brg-color-slate-50: #f8fafc;
  --brg-color-slate-100: #f1f5f9;
  --brg-color-slate-300: #cbd5e1;
  --brg-color-slate-900: #111827;
  --brg-color-gray-200: #e5e7eb;
  --brg-color-gray-400: #9ca3af;
  --brg-color-gray-600: #4b5563;
  --brg-color-white: #fff;

  --brg-color-bg-primary: var(--brg-color-white);
  --brg-color-bg-subtle: var(--brg-color-slate-50);
  --brg-color-bg-warm: var(--brg-color-orange-50);
  --brg-color-bg-hover: var(--brg-color-slate-100);
  --brg-color-bg-selected: var(--brg-color-orange-50);
  --brg-color-text-primary: var(--brg-color-slate-900);
  --brg-color-text-secondary: var(--brg-color-gray-600);
  --brg-color-text-inverse: var(--brg-color-white);
  --brg-color-text-disabled: var(--brg-color-gray-400);
  --brg-color-border-default: var(--brg-color-gray-200);
  --brg-color-border-strong: var(--brg-color-slate-300);
  --brg-color-border-focus: var(--brg-color-orange-700);
  --brg-color-action-primary: var(--brg-color-orange-700);
  --brg-color-action-accent: var(--brg-color-orange-500);
  --brg-color-link-default: var(--brg-color-orange-700);
  --brg-color-link-hover: var(--brg-color-orange-800);
  --brg-color-focus-ring: var(--brg-color-orange-700);

  --brg-spacing-2xs: 4px;
  --brg-spacing-xs: 8px;
  --brg-spacing-sm: 12px;
  --brg-spacing-md: 16px;
  --brg-spacing-lg: 20px;
  --brg-spacing-xl: 24px;
  --brg-spacing-2xl: 32px;
  --brg-spacing-3xl: 40px;
  --brg-spacing-4xl: 48px;
  --brg-spacing-5xl: 64px;
  --brg-spacing-6xl: 80px;
  --brg-spacing-7xl: 96px;

  --brg-radius-none: 0;
  --brg-radius-xs: 4px;
  --brg-radius-sm: 8px;
  --brg-radius-md: 12px;
  --brg-radius-lg: 16px;
  --brg-radius-full: 999px;

  --brg-layout-content-max: 1248px;
  --brg-layout-article-max: 760px;
  --brg-layout-article-reading: 720px;
  --brg-layout-sidebar: 320px;
  --brg-layout-gutter-desktop: 96px;
  --brg-layout-gutter-tablet: 40px;
  --brg-layout-gutter-mobile: 20px;

  --brg-font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --brg-font-display: 700 52px/64px var(--brg-font-family);
  --brg-font-h1: 700 36px/46px var(--brg-font-family);
  --brg-font-h2: 700 28px/38px var(--brg-font-family);
  --brg-font-h3: 700 22px/30px var(--brg-font-family);
  --brg-font-h4: 700 20px/28px var(--brg-font-family);
  --brg-font-body-l: 400 18px/30px var(--brg-font-family);
  --brg-font-article: 400 18px/32px var(--brg-font-family);
  --brg-font-body-m: 400 16px/26px var(--brg-font-family);
  --brg-font-body-s: 400 15px/24px var(--brg-font-family);
  --brg-font-label-m: 500 15px/24px var(--brg-font-family);
  --brg-font-label-s: 500 14px/20px var(--brg-font-family);
  --brg-font-caption: 700 13px/20px var(--brg-font-family);
  --brg-font-meta: 400 14px/22px var(--brg-font-family);
  --brg-font-list-title: 600 18px/28px var(--brg-font-family);
  --brg-font-meta-compact: 400 14px/20px var(--brg-font-family);

  --brg-shadow-card: 0 4px 16px rgb(17 24 39 / 6%);
  --brg-shadow-floating: 0 12px 32px rgb(17 24 39 / 10%);
  --brg-focus-width: 2px;
}