/* ═══════════════════════════════════════════════════════════════════════════
   JT Design System — Design Tokens
   Janytree Inc. / 제니트리 디자인 시스템 정본 토큰 파일

   ⚠️ 이 파일은 편집하지 마세요.
      값을 바꿔야 하면 디렉터에게 요청하고, 개정판이 나오면 파일을 통째로 교체합니다.

   Primary = 로고색 Charcoal #1F2328  ·  Accent = Blue #305CDE
   기준 본문 14px  ·  간격 4px 그리드  ·  기준 라운드 8px
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 이 파일의 버전 (마이그레이션 추적용 — 지우지 마세요) ── */
  --jt-ds-version: "4.0";

  /* ── 폰트 ── */
  --font-base:"Pretendard Variable",Pretendard,"Figtree","Noto Sans SC","Noto Sans TC",
    -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",
    "PingFang SC","Microsoft YaHei","PingFang TC","Microsoft JhengHei",
    "Helvetica Neue",Arial,sans-serif;
  --font-num:"Figtree","Pretendard Variable",ui-monospace,sans-serif;

  /* ═══ MAP — 원시 팔레트 (컴포넌트에서 직접 참조하지 마세요) ═══ */

  /* neutral — 브랜드 잉크 */
  --neutral-0:#FFFFFF;   --neutral-50:#F7F8F9;  --neutral-100:#EEF0F2; --neutral-200:#DEE2E6;
  --neutral-300:#C5CBD1; --neutral-400:#9DA5AF; --neutral-500:#757F8A; --neutral-600:#5A6470;
  --neutral-700:#434B55; --neutral-800:#2E343B; --neutral-900:#1F2328; --neutral-950:#14171A;

  /* gray — UI 구조 */
  --gray-50:#F9FAFB;  --gray-100:#F2F4F6; --gray-200:#E5E8EB; --gray-300:#D1D6DB; --gray-400:#B0B8C1;
  --gray-500:#8B95A1; --gray-600:#6B7684; --gray-700:#4E5968; --gray-800:#333D4B; --gray-900:#191F28;

  /* Core 시맨틱 */
  --blue-50:#EEF3FE;  --blue-100:#D6E1FC; --blue-200:#AEC3F8; --blue-300:#7E9DF1; --blue-400:#5578E8;
  --blue-500:#305CDE; --blue-600:#2A4EC0; --blue-700:#24419E; --blue-800:#1F387F; --blue-900:#1B2F66;

  --green-50:#E7F7F0;  --green-100:#C2ECD9; --green-300:#57C99B; --green-400:#2BB681;
  --green-500:#14A870; --green-600:#0F8E5F; --green-700:#0C744E; --green-900:#074A32;

  --yellow-50:#FEF6E4;  --yellow-100:#FBE8B4; --yellow-300:#F4C64B; --yellow-400:#F2BA2C;
  --yellow-500:#F0B01C; --yellow-600:#D2960F; --yellow-700:#A9760C; --yellow-900:#6B4A0C;

  --red-50:#FDECEC;  --red-100:#FAD3D3; --red-300:#EC8080; --red-400:#E66161;
  --red-500:#E14B4B; --red-600:#C93A3F; --red-700:#A82F35; --red-900:#6B1F23;

  /* Extended — 데이터 시각화·특수 강조 */
  --purple-50:#F4EFFB;  --purple-100:#E6D8F5; --purple-300:#AB84DA;
  --purple-500:#6C3BAA; --purple-600:#5C3092; --purple-700:#4B2777;
  --teal-50:#E6F6F6;  --teal-100:#BEE8E8; --teal-300:#52C2C2;
  --teal-500:#12A3A3; --teal-600:#0D8A8A; --teal-700:#0B7070;

  /* ── 타입 스케일 (기준 14px) ── */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-lg:16px;
  --fs-xl:18px;  --fs-2xl:22px; --fs-3xl:26px; --fs-4xl:30px;
  --lh-tight:1.35; --lh-snug:1.45; --lh-normal:1.6; --lh-relaxed:1.75;

  /* ── 간격 (4px 그리드) ── */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;  --space-5:20px;  --space-6:24px;
  --space-7:32px; --space-8:40px; --space-9:48px; --space-10:56px; --space-11:64px; --space-12:72px;

  /* ── 라운드 ── */
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* ── 그림자 (라이트) ── */
  --shadow-1:0 1px 2px rgba(25,31,40,.06),0 1px 3px rgba(25,31,40,.04);
  --shadow-2:0 2px 8px rgba(25,31,40,.06),0 1px 3px rgba(25,31,40,.05);
  --shadow-3:0 8px 24px rgba(25,31,40,.10),0 2px 6px rgba(25,31,40,.06);
  --shadow-4:0 20px 40px rgba(25,31,40,.14),0 4px 10px rgba(25,31,40,.08);

  /* ── 모션 ── */
  --dur-instant:100ms; --dur-fast:160ms; --dur-base:240ms; --dur-slow:360ms; --dur-page:480ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);   --ease-decelerate:cubic-bezier(0,0,.2,1);
  --ease-accelerate:cubic-bezier(.4,0,1,1);  --ease-emphasized:cubic-bezier(.2,0,0,1);

  /* ── 브레이크포인트 (참조용) ── */
  --bp-mobile:639px; --bp-tablet:1023px; --bp-desktop:1439px; --container-max:1200px;

  /* ═══════════════════════════════════════════════════════════════════════
     ALIAS — 컴포넌트는 아래 이름만 참조합니다.
     팔레트를 var()로 가리키므로, 팔레트가 바뀌면 여기가 자동으로 따라옵니다.
     ═══════════════════════════════════════════════════════════════════════ */

  /* 텍스트 */
  --color-text:           var(--neutral-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary:  var(--gray-500);
  --color-text-disabled:  var(--gray-400);
  --color-on-primary:     var(--neutral-0);

  /* 배경 (표면 고도) */
  --color-bg-layout:    var(--gray-50);
  --color-bg-container: var(--neutral-0);
  --color-bg-elevated:  var(--neutral-0);
  --color-fill-hover:   var(--gray-50);

  /* 테두리·구분 */
  --color-border: var(--gray-200);
  --color-split:  var(--gray-100);

  /* 브랜드·상호작용 */
  --color-primary:        var(--neutral-900);
  --color-primary-hover:  var(--neutral-800);
  --color-primary-active: var(--neutral-950);
  --color-accent:         var(--blue-500);
  --color-accent-hover:   var(--blue-400);
  --color-accent-bg:      var(--blue-50);
  --color-accent-border:  var(--blue-100);
  --color-link:           var(--color-accent);
  --color-link-hover:     var(--color-accent-hover);
  --color-focus:          var(--color-accent);

  /* 상태 (배경 / 테두리 / 글자 3종 세트) */
  --color-success: var(--green-600);  --color-success-bg: var(--green-50);
  --color-success-border: var(--green-100); --color-success-text: var(--green-700);
  --color-warning: var(--yellow-500); --color-warning-bg: var(--yellow-50);
  --color-warning-border: var(--yellow-100); --color-warning-text: var(--yellow-900);
  --color-error:   var(--red-600);    --color-error-bg:   var(--red-50);
  --color-error-border:   var(--red-100);   --color-error-text:   var(--red-700);
  --color-info:    var(--blue-600);   --color-info-bg:    var(--blue-50);
  --color-info-border:    var(--blue-100);  --color-info-text:    var(--blue-700);
  --color-science: var(--teal-500);   --color-science-bg: var(--teal-50);
  --color-science-border: var(--teal-100);  --color-science-text: var(--teal-700);

  /* 컨트롤 높이 (입력·버튼·셀렉트 통일) */
  --control-height:36px; --control-height-sm:28px; --control-height-lg:44px;

  /* 엘리베이션 의미 이름 */
  --elev-card:var(--shadow-1); --elev-pop:var(--shadow-2); --elev-modal:var(--shadow-3);

  /* 밀도 (기본 = comfortable) */
  --density-fs-base:14px; --density-fs-sm:12px; --density-lh:1.6;
  --cell-pad-x:12px; --cell-pad-y:8px;

  /* 로고 테마 스왑 */
  --logo-light-display:block; --logo-dark-display:none;
}

/* ═══ 다크 테마 — Alias만 재정의 ═══ */
[data-theme="dark"]{
  --color-text:rgba(255,255,255,.88);
  --color-text-secondary:rgba(255,255,255,.55);
  --color-text-tertiary:rgba(255,255,255,.40);
  --color-text-disabled:rgba(255,255,255,.25);

  /* 표면 밝기 계단 (다크 전용 값 — 팔레트에 없음) */
  --elev-0:#0F172A; --elev-1:#1E293B; --elev-2:#273449; --elev-3:#2E3C52; --elev-4:#35435B;

  --color-bg-layout:    var(--elev-0);
  --color-bg-container: var(--elev-1);
  --color-bg-elevated:  var(--elev-2);
  --color-fill-hover:rgba(255,255,255,.06);
  --color-border:rgba(255,255,255,.14);
  --color-split:rgba(255,255,255,.08);

  --elev-hairline:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-dark:0 8px 24px rgba(0,0,0,.36);
  --elev-card:var(--elev-hairline);
  --elev-pop:var(--shadow-dark),var(--elev-hairline);
  --elev-modal:0 12px 32px rgba(0,0,0,.44),var(--elev-hairline);

  /* primary 반전: 밝은 표면 + 어두운 글자 */
  --color-primary:       var(--neutral-50);
  --color-primary-hover: var(--neutral-0);
  --color-primary-active:var(--neutral-100);
  --color-on-primary:    var(--neutral-900);

  /* accent 밝게 (blue-300 = 다크 위 대비 5.56:1) */
  --color-accent:       var(--blue-300);
  --color-accent-hover: var(--blue-200);
  --color-accent-bg:    rgba(126,157,241,.16);
  --color-accent-border:rgba(126,157,241,.34);
  --color-link:      var(--color-accent);
  --color-link-hover:var(--color-accent-hover);
  --color-focus:     var(--color-accent);

  /* 상태색 — 다크 전용 값(채도↓ 밝기↑). 배경은 채우지 않고 테두리·글자로 표현 */
  --color-success:#5FD6A6; --color-success-text:#5FD6A6; --color-success-border:rgba(95,214,166,.40); --color-success-bg:transparent;
  --color-warning:#F5CE6B; --color-warning-text:#F5CE6B; --color-warning-border:rgba(245,206,107,.40);--color-warning-bg:transparent;
  --color-error:#F09090;   --color-error-text:#F09090;   --color-error-border:rgba(240,144,144,.40);  --color-error-bg:transparent;
  --color-info:var(--blue-300);    --color-info-text:var(--blue-300);    --color-info-border:rgba(126,157,241,.40); --color-info-bg:transparent;
  --color-science:#5FD2D2; --color-science-text:#5FD2D2; --color-science-border:rgba(95,210,210,.40); --color-science-bg:transparent;

  --logo-light-display:none; --logo-dark-display:block;
}

/* ═══ 컴팩트 밀도 — 바닥값 준수 (본문 12px / 캡션 11px / 행간 1.45) ═══ */
[data-density="compact"]{
  --control-height:30px; --control-height-sm:24px;
  --density-fs-base:13px; --density-fs-sm:12px; --density-lh:1.5;
  --cell-pad-x:10px; --cell-pad-y:5px;
}

/* ═══ 접근성 — 필수 ═══ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important;}
}