/*
 * Global design tokens & typography
 * Base font size: 15px (1rem)
 */

:root {
  /* Typography */
  --font-size-base: 15px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --line-height-base: 1.5;
  --line-height-tight: 1.25;
  --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-display: "Montserrat", "Inter", sans-serif;

  /* Brand — black + orange */
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-primary-light: #fb923c;
  --color-primary-bg: #ffffff;
  --color-accent-red: #ef4444;
  --color-text: #171717;
  --color-text-muted: #737373;
  --color-border: #e5e5e5;
  --color-surface: #ffffff;

  /* Border radius — UI는 md 이하만 (lg는 상한, 사용 금지) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Bootstrap sync */
  --bs-body-font-size: var(--font-size-md);
  --bs-body-line-height: var(--line-height-base);
  --bs-body-font-family: var(--font-family-body);
}

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: var(--font-size-3xl); }
h2, .h2 { font-size: var(--font-size-2xl); }
h3, .h3 { font-size: var(--font-size-xl); }
h4, .h4 { font-size: var(--font-size-lg); }
h5, .h5 { font-size: var(--font-size-md); }
h6, .h6 { font-size: var(--font-size-sm); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-display {
  font-family: var(--font-family-display);
}

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }

/* Brand wordmark: color + on + table */
.brand-logo {
  font-family: var(--font-family-display);
  font-weight: 800;
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.brand-logo__part {
  color: var(--color-primary);
}

.brand-logo__part--on {
  color: var(--color-text);
}