/* Generated from tokens.json. Do not hand-edit. Font notices: fonts/LICENSE-*.txt. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-ascii.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+20-7E, U+B7, U+2013-2014;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-ascii.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+20, U+26, U+28-29, U+2B, U+2D-3A, U+41-5A, U+B7, U+2013-2014;
}

:root {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-ko: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-ja: "Inter", "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", system-ui, sans-serif;
  --size-label: 12px;
  --size-meta: 14px;
  --size-body: 16px;
  --size-title: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-control: 4px;
  --radius-panel: 8px;
  --weight-normal: 400;
  --weight-mono: 500;
  --weight-strong: 600;
  --leading-body: 1.6;
  --leading-title: 1.3;
  --tracking-label: 0.1em;
  --line-border: 1px;
  --line-focus: 2px;
  --line-offset: 3px;
  --motion-duration: 120ms;
  --canvas: #FAFAF8;
  --surface: #FFFFFF;
  --subtle: #F1F2EF;
  --text: #252723;
  --muted: #62675F;
  --label: #51564E;
  --border: #DADCD7;
  --control: #7D8478;
  --hover: #ECEFE8;
  --selected: #30352D;
  --on-selected: #FFFFFF;
  --focus: #3D4938;
  --danger: #A52F27;
  --danger-bg: #FFF0ED;
  --success: #2E6943;
  --disabled: #90958D;
  color-scheme: light;
  --layout-max: 960px;
  --layout-target: 44px;
  --layout-columns: 1;
  --slot-columns: 4;
  --outer-padding: 16px;
  --panel-padding: 24px;
  --top-space: 24px;
  --details-padding: 0px;
  --stack-padding: 24px;
  --divider-width: 0px;
  --stack-divider: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #050607;
    --surface: #0C0D0F;
    --subtle: #151719;
    --text: #E2E1DC;
    --muted: #9B9C9D;
    --label: #B8B6AF;
    --border: #282A2C;
    --control: #686C72;
    --hover: #1B1E21;
    --selected: #D9D8D1;
    --on-selected: #121314;
    --focus: #D4D2CA;
    --danger: #F0A49C;
    --danger-bg: #2D1818;
    --success: #ADD3BB;
    --disabled: #6B6D70;
  }
}

@media (min-width: 760px) {
  :root {
    --layout-columns: 2;
    --outer-padding: 32px;
    --panel-padding: 32px;
    --top-space: 48px;
    --details-padding: 32px;
    --stack-padding: 0px;
    --divider-width: 1px;
    --stack-divider: 0px;
  }
}

@media (max-width: 379px) {
  :root { --slot-columns: 3; }
}