/* 디자인 토큰 — 자동 생성물. research/tokens.py 를 고치고 emit.py 를 다시 돌린다. */

:root {
  /* 강조색 */
  --accent-50: #EBF2FF;
  --accent-100: #CFE0FF;
  --accent-200: #9DBEFF;
  --accent-300: #77A3FF;
  --accent-400: #5C8EFE;
  --accent-500: #497EF7;
  --accent-600: #3A6EEC;
  --accent-700: #2F61DA;
  --accent-800: #2855C3;
  --accent-900: #254695;
  --accent-950: #1C346B;

  /* 중립색 */
  --neutral-0: #FFFFFF;
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F5F7;
  --neutral-200: #E5E8ED;
  --neutral-300: #D3D7DD;
  --neutral-400: #B5BBC4;
  --neutral-500: #9299A3;
  --neutral-600: #6E7680;
  --neutral-700: #5B636D;
  --neutral-800: #404853;
  --neutral-900: #272E39;
  --neutral-950: #171D26;
  --neutral-1000: #0B1118;

  /* 보조색 */
  /* 완료·성공 */
  --green-50: #E9F5EC;
  --green-100: #CAE8D3;
  --green-200: #8FD0A5;
  --green-300: #5BBE82;
  --green-400: #26AF69;
  --green-500: #00A256;
  --green-600: #009547;
  --green-700: #00873C;
  --green-800: #007733;
  --green-900: #005E2D;
  --green-950: #004523;
  /* 주의·대기 */
  --amber-50: #F9F0E5;
  --amber-100: #F0DCC1;
  --amber-200: #E1B67C;
  --amber-300: #D5993D;
  --amber-400: #CA8300;
  --amber-500: #BF7200;
  --amber-600: #B26300;
  --amber-700: #A35700;
  --amber-800: #914C00;
  --amber-900: #713F00;
  --amber-950: #522F00;
  /* 오류·위험 */
  --red-50: #FDEDEB;
  --red-100: #FAD5D0;
  --red-200: #F3A89F;
  --red-300: #EB857A;
  --red-400: #E2695F;
  --red-500: #D9544B;
  --red-600: #CB433C;
  --red-700: #BB3631;
  --red-800: #A62E29;
  --red-900: #812C26;
  --red-950: #5D221E;
  /* 보조 강조 */
  --violet-50: #F3EFFC;
  --violet-100: #E3DAF8;
  --violet-200: #C7B2F0;
  --violet-300: #B393EA;
  --violet-400: #A37BE3;
  --violet-500: #976ADB;
  --violet-600: #8A5ACF;
  --violet-700: #7D4EBF;
  --violet-800: #6F44A9;
  --violet-900: #573A82;
  --violet-950: #3F2B5E;

  /* ── 역할 ── */
  --canvas: #FFFFFF;
  --canvas-alt: #F9FAFB;
  --canvas-sunken: #F3F5F7;
  --surface: #FFFFFF;
  --surface-alt: #F9FAFB;
  --surface-invert: #171D26;
  --line: #E5E8ED;
  --line-strong: #D3D7DD;
  --line-invert: rgba(255,255,255,.12);
  --ink: #171D26;
  --ink-body: #404853;
  --ink-muted: #6E7680;
  --ink-subtle: #9299A3;
  --ink-disabled: #B5BBC4;
  --ink-invert: #FFFFFF;
  --ink-muted-alt: #5B636D;
  --accent: #3A6EEC;
  --accent-hover: #2F61DA;
  --accent-active: #2855C3;
  --accent-ink: #FFFFFF;
  --accent-soft: #EBF2FF;
  --accent-soft-hover: #CFE0FF;
  --accent-line: #9DBEFF;
  --accent-text: #2F61DA;
  --tint: rgba(17,26,56,.05);
  --tint-hover: rgba(17,26,56,.08);
  --tint-active: rgba(17,26,56,.12);
  --scrim: rgba(11,17,24,.48);
  --focus: #497EF7;
  --shadow-color: 16,24,48;

  /* 타이포 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-display-2xl: 88px; --t-display-2xl-lh: 104px; --t-display-2xl-ls: -1.76px; --t-display-2xl-w: 700;
  --t-display-xl: 72px; --t-display-xl-lh: 85px; --t-display-xl-ls: -1.44px; --t-display-xl-w: 700;
  --t-display-lg: 56px; --t-display-lg-lh: 66px; --t-display-lg-ls: -1.12px; --t-display-lg-w: 700;
  --t-display-md: 48px; --t-display-md-lh: 60px; --t-display-md-ls: -0.96px; --t-display-md-w: 700;
  --t-display-sm: 40px; --t-display-sm-lh: 50px; --t-display-sm-ls: -0.8px; --t-display-sm-w: 700;
  --t-heading-xl: 34px; --t-heading-xl-lh: 44px; --t-heading-xl-ls: -0.68px; --t-heading-xl-w: 700;
  --t-heading-lg: 28px; --t-heading-lg-lh: 38px; --t-heading-lg-ls: -0.56px; --t-heading-lg-w: 700;
  --t-heading-md: 24px; --t-heading-md-lh: 33px; --t-heading-md-ls: -0.48px; --t-heading-md-w: 700;
  --t-heading-sm: 20px; --t-heading-sm-lh: 29px; --t-heading-sm-ls: -0.4px; --t-heading-sm-w: 600;
  --t-body-lg: 18px; --t-body-lg-lh: 29px; --t-body-lg-ls: 0px; --t-body-lg-w: 400;
  --t-body-md: 16px; --t-body-md-lh: 26px; --t-body-md-ls: 0px; --t-body-md-w: 400;
  --t-body-sm: 15px; --t-body-sm-lh: 24px; --t-body-sm-ls: 0px; --t-body-sm-w: 400;
  --t-body-xs: 14px; --t-body-xs-lh: 22px; --t-body-xs-ls: 0px; --t-body-xs-w: 400;
  --t-caption: 13px; --t-caption-lh: 21px; --t-caption-ls: 0px; --t-caption-w: 400;
  --t-micro: 12px; --t-micro-lh: 19px; --t-micro-ls: 0px; --t-micro-w: 400;
  --t-nano: 11px; --t-nano-lh: 18px; --t-nano-ls: 0px; --t-nano-w: 400;

  /* 간격 */
  --s-0: 0px;
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-160: 160px;
  --s-200: 200px;
  --s-240: 240px;

  /* 반경 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-3xl: 32px;
  --r-4xl: 40px;
  --r-full: 999px;

  /* 컨트롤 (높이·반경·글자·패딩이 한 세트) */
  --c-xs-h: 28px; --c-xs-r: 8px; --c-xs-fs: 13px; --c-xs-px: 10px; --c-xs-gap: 4px;
  --c-sm-h: 36px; --c-sm-r: 10px; --c-sm-fs: 14px; --c-sm-px: 14px; --c-sm-gap: 6px;
  --c-md-h: 44px; --c-md-r: 12px; --c-md-fs: 15px; --c-md-px: 18px; --c-md-gap: 6px;
  --c-lg-h: 52px; --c-lg-r: 14px; --c-lg-fs: 16px; --c-lg-px: 22px; --c-lg-gap: 8px;
  --c-xl-h: 60px; --c-xl-r: 16px; --c-xl-fs: 17px; --c-xl-px: 28px; --c-xl-gap: 10px;

  /* 그림자 */
  --sh-xs: 0 1px 2px rgba(16,24,48,.04);
  --sh-sm: 0 2px 6px rgba(16,24,48,.05);
  --sh-md: 0 8px 24px rgba(16,24,48,.06);
  --sh-lg: 0 16px 40px rgba(16,24,48,.08);
  --sh-xl: 0 28px 72px rgba(16,24,48,.12);
  --sh-pop: 0 0 0 1px rgba(16,24,48,.04), 0 10px 32px rgba(16,24,48,.10), 0 2px 6px rgba(16,24,48,.05);

  /* 모션 */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.55,.06,.68,.19);
  --ease-inout: cubic-bezier(.4,0,.2,1);
  --ease-emph: cubic-bezier(.64,0,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
  --d-1: 120ms;
  --d-2: 180ms;
  --d-3: 240ms;
  --d-4: 320ms;
  --d-5: 420ms;
  --d-6: 640ms;
  --d-7: 900ms;

  /* 레이아웃 */
  --sec-sm: 64px;
  --sec-md: 96px;
  --sec-lg: 128px;
  --sec-xl: 160px;
  --sec-hero: 200px;
  --w-sm: 640px;
  --w-md: 768px;
  --w-narrow: 880px;
  --w-base: 1140px;
  --w-wide: 1280px;
  --w-max: 1440px;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-pop: 300;
  --z-scrim: 400;
  --z-sheet: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tip: 800;

  /* 안전영역 */
  --safe-t: env(safe-area-inset-top,0px);  --safe-b: env(safe-area-inset-bottom,0px);
  --safe-l: env(safe-area-inset-left,0px); --safe-r: env(safe-area-inset-right,0px);
  --nav-h: 60px; --tabbar-h: 58px; --dock-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0B1118;
    --canvas-alt: #12181F;
    --canvas-sunken: #0A0F15;
    --surface: #151C24;
    --surface-alt: #1B232D;
    --surface-invert: #F9FAFB;
    --line: rgba(255,255,255,.09);
    --line-strong: rgba(255,255,255,.16);
    --line-invert: rgba(0,0,0,.12);
    --ink: #F4F6F8;
    --ink-body: #D7DBE1;
    --ink-muted: #9AA2AD;
    --ink-subtle: #7C848F;
    --ink-disabled: #575E69;
    --ink-invert: #0B1118;
    --ink-muted-alt: #AEB5BF;
    --accent: #5C8EFE;
    --accent-hover: #77A3FF;
    --accent-active: #497EF7;
    --accent-ink: #0B1118;
    --accent-soft: rgba(92,142,254,.14);
    --accent-soft-hover: rgba(92,142,254,.22);
    --accent-line: rgba(92,142,254,.30);
    --accent-text: #77A3FF;
    --tint: rgba(255,255,255,.06);
    --tint-hover: rgba(255,255,255,.10);
    --tint-active: rgba(255,255,255,.14);
    --scrim: rgba(0,0,0,.62);
    --focus: #5C8EFE;
    --shadow-color: 0,0,0;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --canvas: #0B1118;
  --canvas-alt: #12181F;
  --canvas-sunken: #0A0F15;
  --surface: #151C24;
  --surface-alt: #1B232D;
  --surface-invert: #F9FAFB;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --line-invert: rgba(0,0,0,.12);
  --ink: #F4F6F8;
  --ink-body: #D7DBE1;
  --ink-muted: #9AA2AD;
  --ink-subtle: #7C848F;
  --ink-disabled: #575E69;
  --ink-invert: #0B1118;
  --ink-muted-alt: #AEB5BF;
  --accent: #5C8EFE;
  --accent-hover: #77A3FF;
  --accent-active: #497EF7;
  --accent-ink: #0B1118;
  --accent-soft: rgba(92,142,254,.14);
  --accent-soft-hover: rgba(92,142,254,.22);
  --accent-line: rgba(92,142,254,.30);
  --accent-text: #77A3FF;
  --tint: rgba(255,255,255,.06);
  --tint-hover: rgba(255,255,255,.10);
  --tint-active: rgba(255,255,255,.14);
  --scrim: rgba(0,0,0,.62);
  --focus: #5C8EFE;
  --shadow-color: 0,0,0;
  color-scheme: dark;
}

/* 브레이크포인트 참고 (CSS 변수는 미디어쿼리에 못 쓴다)
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px
*/