@font-face {
  font-family: "KareSeoul Sans";
  src: url("../fonts/inter-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "KareSeoul Sans";
  src: url("../fonts/inter-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "KareSeoul Sans";
  src: url("../fonts/inter-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --ks-paper: #f8f8f6;
  --ks-surface: #ffffff;
  --ks-ink: #111214;
  --ks-muted: #6d7075;
  --ks-rule: #dedfdf;
  --ks-refraction: #ebe9f8;
  --ks-refraction-blue: #e4f2fb;
  --ks-refraction-coral: #f8e7e2;
  --ks-focus: #315ee7;
  --ks-gutter: clamp(1rem, 3vw, 3rem);
  --ks-space-1: 0.5rem;
  --ks-space-2: 0.75rem;
  --ks-space-3: 1rem;
  --ks-space-4: 1.5rem;
  --ks-space-5: 2rem;
  --ks-space-6: 3rem;
  --ks-space-7: clamp(4rem, 8vw, 8rem);
  --ks-radius: 1.25rem;
  --ks-sans: "KareSeoul Sans", Inter, "Noto Sans", "Noto Sans CJK KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ks-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ks-shadow: 0 1.5rem 4rem rgb(17 18 20 / 8%);
  /* Compatibility aliases for the calculator and long-form component library. */
  --ks-content-gutter: var(--ks-gutter);
  --ks-section-space: var(--ks-space-7);
  --ks-paper-light: var(--ks-surface);
  --ks-paper-deep: var(--ks-refraction-coral);
  --ks-white: var(--ks-surface);
  --ks-inverse: var(--ks-surface);
  --ks-navy: var(--ks-ink);
  --ks-navy-dark: var(--ks-ink);
  --ks-rule-dark: var(--ks-rule);
  --ks-coral: var(--ks-focus);
  --ks-vermilion: var(--ks-focus);
  --ks-teal: var(--ks-muted);
  --ks-gold: var(--ks-muted);
  --ks-serif: var(--ks-sans);
  --ks-transition: 180ms ease;
}