/* ==========================================================================
   301cell — Design Tokens
   라이트/다크 이중 토큰셋. 모든 색상은 반드시 이 파일의 변수를 통해서만 사용한다.
   하드코딩 hex 를 컴포넌트 CSS 에 쓰지 않는다.
   ========================================================================== */

:root {
  /* ---------- Typography ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "D2Coding", monospace;

  --fs-2xs: 0.6875rem;  /* 11px */
  --fs-xs:  0.75rem;    /* 12px */
  --fs-sm:  0.8125rem;  /* 13px */
  --fs-md:  0.875rem;   /* 14px  기본 */
  --fs-lg:  1rem;       /* 16px */
  --fs-xl:  1.125rem;   /* 18px */
  --fs-2xl: 1.375rem;   /* 22px */
  --fs-3xl: 1.75rem;    /* 28px */
  --fs-4xl: 2.25rem;    /* 36px  메트릭 수치 */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-base: 1.55;
  --lh-loose: 1.75;

  /* ---------- Spacing (4px scale) ---------- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ---------- Radius ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* ---------- Layout metrics ---------- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 60px;
  --header-h: 56px;
  --subheader-h: 44px;
  --drawer-w: 480px;
  --content-max: 1680px;

  /* 배양실 태블릿 장갑 모드 최소 터치 타깃 */
  --touch-min: 44px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- z-index ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-header: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}

/* ==========================================================================
   LIGHT THEME  (기본값)
   밝은 회색 배경 + 네이비·청록 포인트 — 의료·바이오 연구기관 신뢰감
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* 표면 */
  --bg:            #f4f6fa;
  --bg-sunken:     #e9edf3;
  --surface:       #ffffff;
  --surface-2:     #f7f9fc;
  --surface-3:     #eef2f7;
  --surface-hover: #f0f4f9;
  --surface-active:#e4ebf3;
  --overlay:       rgba(14, 22, 34, 0.44);

  /* 경계 */
  --border:        #dce3ed;
  --border-strong: #c3cede;
  --border-subtle: #e8edf4;

  /* 텍스트 */
  --text:          #14202e;
  --text-secondary:#3f5163;
  --text-muted:    #667a90;
  --text-faint:    #93a3b5;
  --text-inverse:  #ffffff;
  --text-link:     #0b6d8c;

  /* 브랜드 — SC301 로고 퍼플 #A43C93 기준 */
  --brand:         #a43c93;
  --brand-700:     #8c2f7d;
  --brand-900:     #5e1f54;
  --plum-950:      #1c0f21;
  --plum-900:      #251429;

  --primary:       #a43c93;
  --primary-hover: #8c2f7d;
  --primary-active:#74276a;
  --primary-fg:    #ffffff;
  --primary-soft:  #f8ebf5;
  --primary-soft-fg:#7c2a6f;
  --primary-ring:  rgba(164, 60, 147, 0.26);

  /* 보조 강조 — 데이터/과학 영역의 청록 (퍼플과 색상거리 확보) */
  --accent:        #0e8fa0;
  --accent-soft:   #e0f4f6;

  /* 상태 톤 — 배경 / 전경 / 테두리 */
  --tone-neutral-bg:    #eef1f6;  --tone-neutral-fg:    #4a5b6e;  --tone-neutral-bd:    #d5dde8;
  --tone-info-bg:       #e6f0fb;  --tone-info-fg:       #1a5fa8;  --tone-info-bd:       #c6ddf5;
  --tone-progress-bg:   #e0f3f5;  --tone-progress-fg:   #0a7180;  --tone-progress-bd:   #bde3e8;
  --tone-attention-bg:  #ecebfa;  --tone-attention-fg:  #4b3fb0;  --tone-attention-bd:  #d6d3f2;
  --tone-success-bg:    #e4f5ea;  --tone-success-fg:    #1a7040;  --tone-success-bd:    #c2e6cf;
  --tone-warning-bg:    #fdf0dc;  --tone-warning-fg:    #8a5a09;  --tone-warning-bd:    #f5dcb0;
  --tone-danger-bg:     #fdeaea;  --tone-danger-fg:     #b02b2b;  --tone-danger-bd:     #f6cccc;
  --tone-quarantine-bg: #fbe9f1;  --tone-quarantine-fg: #a1246a;  --tone-quarantine-bd: #f2ccdd;
  --tone-disposed-bg:   #eceef1;  --tone-disposed-fg:   #6c7885;  --tone-disposed-bd:   #d8dde3;

  /* 순수 신호색 (차트·점·게이지) */
  --sig-ok:      #1f9254;
  --sig-info:    #2472c8;
  --sig-warn:    #d68910;
  --sig-danger:  #cf3b3b;
  --sig-critical:#a01f1f;
  --sig-idle:    #8c99a8;

  /* 차트 시리즈 (브랜드 퍼플 우선, 색맹 고려 순서) */
  --c1: #a43c93;  --c2: #0e8fa0;  --c3: #d68910;  --c4: #1f9254;
  --c5: #2472c8;  --c6: #cf3b3b;  --c7: #6b4bb5;  --c8: #a3671f;
  --grid: #e4eaf1;

  /* 그림자 */
  --sh-xs: 0 1px 2px rgba(16, 30, 48, 0.06);
  --sh-sm: 0 1px 3px rgba(16, 30, 48, 0.08), 0 1px 2px rgba(16, 30, 48, 0.04);
  --sh-md: 0 4px 12px rgba(16, 30, 48, 0.09), 0 1px 3px rgba(16, 30, 48, 0.05);
  --sh-lg: 0 12px 32px rgba(16, 30, 48, 0.14), 0 2px 8px rgba(16, 30, 48, 0.06);
  --sh-xl: 0 24px 56px rgba(16, 30, 48, 0.18);

  /* 사이드바 — 라이트에서도 딥 플럼 유지 (브랜드 앵커) */
  --sidebar-bg:        #1c0f21;
  --sidebar-fg:        #cfc0d2;
  --sidebar-fg-strong: #ffffff;
  --sidebar-muted:     #9a869f;
  --sidebar-hover:     rgba(255, 255, 255, 0.07);
  --sidebar-active:    rgba(208, 119, 192, 0.18);
  --sidebar-active-bar:#d077c0;
  --sidebar-border:    rgba(255, 255, 255, 0.09);

  --header-bg:     rgba(255, 255, 255, 0.88);
  --header-border: var(--border);

  --skeleton-base: #e8edf3;
  --skeleton-shine: #f4f7fa;
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0c1117;
  --bg-sunken:     #080c11;
  --surface:       #141b23;
  --surface-2:     #1a222c;
  --surface-3:     #202a35;
  --surface-hover: #1e2833;
  --surface-active:#26323f;
  --overlay:       rgba(3, 6, 10, 0.66);

  --border:        #28323f;
  --border-strong: #3a4757;
  --border-subtle: #1e2731;

  --text:          #e4ecf4;
  --text-secondary:#b3c1d1;
  --text-muted:    #8b9bad;
  --text-faint:    #64748b;
  --text-inverse:  #0c1117;
  --text-link:     #4cc4e0;

  --brand:         #d077c0;
  --brand-700:     #b95ba8;
  --brand-900:     #7c2a6f;
  --plum-950:      #120a16;
  --plum-900:      #1a0f1f;

  --primary:       #d077c0;
  --primary-hover: #dd8bcd;
  --primary-active:#e79fd8;
  --primary-fg:    #2a0a24;
  --primary-soft:  #351230;
  --primary-soft-fg:#e6a5da;
  --primary-ring:  rgba(208, 119, 192, 0.32);

  --accent:        #35b6c6;
  --accent-soft:   #0d2f34;

  /* 다크 대비 보정: 배경은 저채도 딥톤, 전경은 밝은 채도 */
  --tone-neutral-bg:    #212a34;  --tone-neutral-fg:    #a8b6c5;  --tone-neutral-bd:    #303c49;
  --tone-info-bg:       #122a44;  --tone-info-fg:       #79b6f2;  --tone-info-bd:       #1d3d5e;
  --tone-progress-bg:   #0d2d33;  --tone-progress-fg:   #4fc6d6;  --tone-progress-bd:   #17434c;
  --tone-attention-bg:  #1e1c3e;  --tone-attention-fg:  #9a92f0;  --tone-attention-bd:  #2c2957;
  --tone-success-bg:    #10301f;  --tone-success-fg:    #63cb8e;  --tone-success-bd:    #1b4630;
  --tone-warning-bg:    #33270f;  --tone-warning-fg:    #eab556;  --tone-warning-bd:    #4a3817;
  --tone-danger-bg:     #351718;  --tone-danger-fg:     #f08585;  --tone-danger-bd:     #4c2224;
  --tone-quarantine-bg: #35142a;  --tone-quarantine-fg: #ef85b6;  --tone-quarantine-bd: #4c1f3c;
  --tone-disposed-bg:   #1c2229;  --tone-disposed-fg:   #7d8996;  --tone-disposed-bd:   #2a323b;

  --sig-ok:      #3fbb72;
  --sig-info:    #5b9ff0;
  --sig-warn:    #e0a33c;
  --sig-danger:  #ec6b6b;
  --sig-critical:#f04545;
  --sig-idle:    #6b7a8a;

  --c1: #d077c0;  --c2: #35b6c6;  --c3: #e0a33c;  --c4: #3fbb72;
  --c5: #5b9ff0;  --c6: #ec6b6b;  --c7: #9a92f0;  --c8: #c9954e;
  --grid: #232e3a;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.48), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.34);
  --sh-lg: 0 14px 36px rgba(0, 0, 0, 0.58), 0 2px 8px rgba(0, 0, 0, 0.4);
  --sh-xl: 0 28px 64px rgba(0, 0, 0, 0.68);

  --sidebar-bg:        #120a16;
  --sidebar-fg:        #c2b2c6;
  --sidebar-fg-strong: #f7f2f8;
  --sidebar-muted:     #8b7891;
  --sidebar-hover:     rgba(255, 255, 255, 0.055);
  --sidebar-active:    rgba(208, 119, 192, 0.16);
  --sidebar-active-bar:#d077c0;
  --sidebar-border:    rgba(255, 255, 255, 0.07);

  --header-bg:     rgba(20, 27, 35, 0.9);
  --header-border: var(--border);

  --skeleton-base: #1c242e;
  --skeleton-shine: #26313d;
}

/* 인쇄 시에는 항상 라이트 팔레트로 강제 (print.css 와 병행) */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #fff;
    --text: #000; --text-secondary: #222; --text-muted: #444;
    --border: #999; --border-strong: #666; --border-subtle: #ccc;
    --sidebar-bg: #fff; --sidebar-fg: #000;
  }
}