:root,
[data-tone="light"] {
  color-scheme: light;
  --color-bg: #F6F6F4;
  --color-surface: #FFFFFF;
  --color-surface-2: #EFEFEC;
  --color-ink: #111113;
  --color-ink-2: #5B5B60;
  --color-line: #E3E3DF;
  --color-accent: #0F7B5F;
  --color-warm: #F2A98A;
  --color-danger: #B42318;
  --color-danger-bg: #FDE8E7;
  --color-caution-bg: #FFF4CE;
  --color-caution-ink: #5C4300;
  --color-on-ink: #FFFFFF;

  --font-body: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --type-display-size: 40px;
  --type-display-line: 44px;
  --type-display-weight: 600;
  --type-title-size: 24px;
  --type-title-line: 30px;
  --type-title-weight: 600;
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-body-strong-weight: 600;
  --type-label-size: 13px;
  --type-label-line: 18px;
  --type-label-weight: 500;
  --type-label-spacing: 0.3px;
  --type-mono-size: 14px;
  --type-mono-line: 20px;
  --type-mono-weight: 500;
  --type-keypad-size: 28px;
  --type-keypad-line: 34px;
  --type-keypad-weight: 500;

  --radius-card: 24px;
  --radius-field: 14px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;

  --size-button: 56px;
  --size-icon-circle: 40px;
  --size-screen-padding: 20px;
  --size-card-padding: 20px;
  --shadow-card: 0 8px 24px rgba(17, 17, 19, 0.06);
}

[data-tone="dark"] {
  color-scheme: dark;
  --color-bg: #0B0B0C;
  --color-surface: #161618;
  --color-surface-2: #222225;
  --color-ink: #F4F4F2;
  --color-ink-2: #A2A2A8;
  --color-line: #2B2B2F;
  --color-accent: #5FD0A6;
  --color-warm: #F2A98A;
  --color-danger: #FF8A80;
  --color-danger-bg: #3A1614;
  --color-caution-bg: #3A3014;
  --color-caution-ink: #F5DFA1;
  --color-on-ink: #0B0B0C;
  --shadow-card: none;
}