@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --color-canvas: #0b0d0c;
  --color-rail: #101311;
  --color-surface: #151916;
  --color-surface-strong: #1c211d;
  --color-surface-elevated: #242a25;
  --color-surface-recessed: #070908;
  --color-text-primary: #f4f7f2;
  --color-text-secondary: #b8c0b7;
  --color-text-tertiary: #899188;
  --color-border-subtle: #292f2a;
  --color-border-strong: #5f6b60;
  --color-accent: #d4f95b;
  --color-accent-hover: #e0ff75;
  --color-accent-active: #b9dd3f;
  --color-on-accent: #10130d;
  --color-focus: #f0ffb5;
  --color-error: #ff8a8a;
  --color-error-surface: #321a1b;
  --color-warning: #f6c66b;
  --color-warning-surface: #302617;
  --color-success: #88d8a0;
  --color-info: #8fc7ff;
  --color-skeleton-base: #1a1f1b;
  --color-skeleton-highlight: #252b26;
  --color-scrim: rgb(0 0 0 / 68%);
  --font-primary: "Atkinson Hyperlegible", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --type-display: clamp(2rem, 4vw, 3.5rem);
  --type-h1: clamp(1.75rem, 3vw, 2.5rem);
  --type-h2: 1.5rem;
  --type-h3: 1.125rem;
  --type-body-lg: 1.125rem;
  --type-body: 1rem;
  --type-body-sm: 0.875rem;
  --type-label: 0.875rem;
  --type-caption: 0.75rem;
  --type-mono: 0.8125rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --control-min: 44px;
  --control-comfortable: 48px;
  --rail-width: 88px;
  --header-height: 64px;
  --content-max: 1440px;
  --reading-max: 720px;
  --login-form-max: 420px;
  --player-max: 1280px;
  --media-ratio: 16 / 9;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --motion-immediate: 80ms;
  --motion-micro: 140ms;
  --motion-standard: 220ms;
  --border-subtle: 1px solid var(--color-border-subtle);
  --border-strong: 1px solid var(--color-border-strong);
  --shadow-rest: 0 1px 2px rgb(0 0 0 / 28%);
  --shadow-elevated: 0 12px 32px rgb(0 0 0 / 48%);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 4.5%);
  --z-base: 0;
  --z-rail: 10;
  --z-sticky: 20;
  --z-dialog: 40;
  --z-skip: 60;
}