:root {
  color-scheme: light;
  --canvas: #fdfdfc;
  --surface: #ffffff;
  --surface-soft: #f3f3f1;
  --surface-hover: #ebebe8;
  --ink: #242423;
  --ink-muted: #6b6b66;
  --line: #e7e7e3;
  --on-ink: #ffffff;
  --focus: #242423;
  --danger: #b34242;
  --success: #10b981;
  --success-hover: #059669;
  --success-active: #047857;
  --primary-hover: #40403d;
  --primary-active: #090909;
  --line-control: #aaa9a3;
  --line-shortcut: #d5d5d0;
  --line-art: rgba(0,0,0,.035);
  --dialog-shadow: rgba(0,0,0,.12);
  --backdrop: rgba(20,20,18,.38);
  --media-surface: rgba(255,255,255,.94);
  --media-ink: #242423;
  --media-scrim: #242423b8;
  --media-on-scrim: #ffffff;
  --font: 'Pretendard Variable', Pretendard, sans-serif;
  --tracking: -0.15px;
  --page-max: 1440px;
  --page-gutter: 40px;
  --header-height: 72px;
  --control-height: 40px;
  --tab-height: 40px;
  --text-brand: 22px;
  --text-tab: 15px;
  --text-card: 14px;
  --grid-gap: 16px;
  --grid-row-gap: 24px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-dialog: 20px;
  --radius-pill: 999px;
  --duration-feedback: 140ms;
  --duration-reveal: 220ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1f2021;
  --surface: #27282a;
  --surface-soft: #2c2d2f;
  --surface-hover: #353639;
  --ink: #e4e4e0;
  --ink-muted: #adada7;
  --line: #3b3c3e;
  --on-ink: #202122;
  --focus: #e4e4e0;
  --danger: #f19595;
  --success: #22c55e;
  --success-hover: #16a34a;
  --success-active: #15803d;
  --primary-hover: #d0d0ca;
  --primary-active: #bfbfb9;
  --line-control: #7f8082;
  --line-shortcut: #4d4e50;
  --line-art: rgba(255,255,255,.08);
  --dialog-shadow: rgba(0,0,0,.32);
  --backdrop: rgba(0,0,0,.6);
}