/* ParadoxBox — generated from tokens.json. Do not edit; run scripts/build_tokens.py */

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b12;
  --surface: #0f1622;
  --border: #223044;
  --border-strong: #7b8da3;
  --text: #eef3f8;
  --text-strong: #ffffff;
  --muted: #b4c0cf;
  --accent: var(--palette-green);
  --accent-text: var(--palette-green-text);
  --accent-edge: var(--accent);
  --accent-soft: rgba(77, 205, 94, 0.14);
  --on-accent: #070b12;
  --palette-green: #4dcd5e;
  --palette-green-text: #4dcd5e;
  --palette-blue: #2aa3ef;
  --palette-blue-text: #2aa3ef;
  --palette-mint: #3dd6c4;
  --palette-mint-text: #3dd6c4;
  --palette-amber: #e0b333;
  --palette-amber-text: #e0b333;
  --palette-coral: #ff6b4a;
  --palette-coral-text: #ff6b4a;
  --success: #4dcd5e;
  --warning: #e0b333;
  --danger: #ef5350;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #e9eef4;
  --surface: #ffffff;
  --border: #aab6c5;
  --border-strong: #141c28;
  --text: #141c28;
  --text-strong: #070b12;
  --muted: #47566a;
  --accent: var(--palette-blue);
  --accent-text: var(--palette-blue-text);
  --accent-edge: var(--text-strong);
  --accent-soft: rgba(61, 157, 240, 0.22);
  --on-accent: #070b12;
  --palette-green: #2fbf5b;
  --palette-green-text: #136c31;
  --palette-blue: #3d9df0;
  --palette-blue-text: #0a62ad;
  --palette-mint: #22c2b0;
  --palette-mint-text: #086b60;
  --palette-amber: #e6ad1a;
  --palette-amber-text: #7a4f00;
  --palette-coral: #f56b47;
  --palette-coral-text: #b23616;
  --success: #136c31;
  --warning: #7a4f00;
  --danger: #c62828;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #e9eef4;
    --surface: #ffffff;
    --border: #aab6c5;
    --border-strong: #141c28;
    --text: #141c28;
    --text-strong: #070b12;
    --muted: #47566a;
    --accent: var(--palette-blue);
    --accent-text: var(--palette-blue-text);
    --accent-edge: var(--text-strong);
    --accent-soft: rgba(61, 157, 240, 0.22);
    --on-accent: #070b12;
    --palette-green: #2fbf5b;
    --palette-green-text: #136c31;
    --palette-blue: #3d9df0;
    --palette-blue-text: #0a62ad;
    --palette-mint: #22c2b0;
    --palette-mint-text: #086b60;
    --palette-amber: #e6ad1a;
    --palette-amber-text: #7a4f00;
    --palette-coral: #f56b47;
    --palette-coral-text: #b23616;
    --success: #136c31;
    --warning: #7a4f00;
    --danger: #c62828;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 48px;
  --space-6: 96px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: Iosevka, "IBM Plex Sans KR", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("fonts/IBMPlexSansKR-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("fonts/IBMPlexSansKR-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("fonts/IBMPlexSansKR-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Iosevka";
  src: url("fonts/Iosevka-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

.display {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.heading {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}

.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
}