/* ============================================================================
   HCT Design Tokens — CSS 변수
   ----------------------------------------------------------------------------
   tokens/tokens.json 에서 파생된 런타임 값입니다.
   컴포넌트는 이 변수들만 사용하며, 생색(#RRGGBB)을 직접 쓰지 않습니다.

   다크 모드 전략:
     - :root                       → 라이트 (기본값)
     - @media (prefers-color-scheme: dark) + :root:not([data-theme="light"])
                                   → 시스템 설정 따름
     - :root[data-theme="dark"]    → 명시적 선택이 항상 우선
   ============================================================================ */

:root {
  color-scheme: light;

  /* --- 원시 팔레트 (직접 사용 금지) ------------------------------------- */
  --hct-neutral-0: #FFFFFF;
  --hct-neutral-25: #FBFBFC;
  --hct-neutral-50: #F7F8F9;
  --hct-neutral-100: #F1F2F4;
  --hct-neutral-200: #EBECF0;
  --hct-neutral-300: #DCDFE4;
  --hct-neutral-400: #B3B9C4;
  --hct-neutral-500: #8590A2;
  --hct-neutral-600: #6B778C;
  --hct-neutral-700: #44546F;
  --hct-neutral-800: #2C3E5D;
  --hct-neutral-900: #172B4D;

  /* --- 브랜드 강조색: 리브랜딩 시 이 10줄만 교체 ------------------------ */
  --hct-accent-50: #EEF4FF;
  --hct-accent-100: #DBE6FF;
  --hct-accent-200: #BFD2FF;
  --hct-accent-300: #93B4FF;
  --hct-accent-400: #6090FF;
  --hct-accent-500: #3B76F6;
  --hct-accent-600: #2563EB;
  --hct-accent-700: #1D4FD8;
  --hct-accent-800: #1E40AF;
  --hct-accent-900: #1E3A8A;

  /* --- 시맨틱: 배경 ------------------------------------------------------ */
  --color-bg-canvas: var(--hct-neutral-50);
  --color-bg-surface: var(--hct-neutral-0);
  --color-bg-raised: var(--hct-neutral-0);
  --color-bg-sunken: var(--hct-neutral-100);
  --color-bg-hover: var(--hct-neutral-100);
  --color-bg-active: var(--hct-neutral-200);
  --color-bg-sidebar: var(--hct-neutral-50);
  --color-bg-overlay: rgb(9 30 66 / 0.42);

  /* --- 시맨틱: 텍스트 ---------------------------------------------------- */
  --color-text-primary: var(--hct-neutral-900);
  --color-text-secondary: var(--hct-neutral-700);
  --color-text-tertiary: var(--hct-neutral-600);
  --color-text-disabled: var(--hct-neutral-400);
  --color-text-inverse: var(--hct-neutral-0);
  --color-text-link: var(--hct-accent-600);

  /* --- 시맨틱: 테두리 ---------------------------------------------------- */
  --color-border-subtle: var(--hct-neutral-200);
  --color-border-default: var(--hct-neutral-300);
  --color-border-strong: var(--hct-neutral-400);
  --color-border-focus: var(--hct-accent-600);

  /* --- 시맨틱: 강조 ------------------------------------------------------ */
  --color-accent-solid: var(--hct-accent-600);
  --color-accent-solid-hover: var(--hct-accent-700);
  --color-accent-subtle: var(--hct-accent-50);
  --color-accent-subtle-hover: var(--hct-accent-100);
  --color-accent-text: var(--hct-accent-700);
  --color-accent-border: var(--hct-accent-200);

  /* --- 시맨틱: 상태 (관리도구의 핵심) ------------------------------------ */
  --color-success-bg: #E7F7EE;
  --color-success-border: #A7E3C0;
  --color-success-text: #15803D;
  --color-success-solid: #16A34A;

  --color-warning-bg: #FEF5E0;
  --color-warning-border: #F5D48A;
  --color-warning-text: #B45309;
  --color-warning-solid: #D97706;

  --color-danger-bg: #FDECEC;
  --color-danger-border: #F5B5B5;
  --color-danger-text: #B91C1C;
  --color-danger-solid: #DC2626;

  --color-info-bg: #EAF2FF;
  --color-info-border: #B8D2FF;
  --color-info-text: #1D4FD8;
  --color-info-solid: #2563EB;

  --color-neutral-bg: var(--hct-neutral-100);
  --color-neutral-border: var(--hct-neutral-300);
  --color-neutral-text: var(--hct-neutral-700);
  --color-neutral-solid: var(--hct-neutral-500);

  --color-review-bg: #F2EEFE;
  --color-review-border: #CFC0F7;
  --color-review-text: #6D28D9;
  --color-review-solid: #7C3AED;

  /* --- 고도 (그림자) ----------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgb(9 30 66 / 0.08);
  --shadow-md: 0 2px 8px -1px rgb(9 30 66 / 0.12), 0 0 1px rgb(9 30 66 / 0.10);
  --shadow-lg: 0 8px 24px -4px rgb(9 30 66 / 0.16), 0 0 1px rgb(9 30 66 / 0.10);
  --shadow-overlay: 0 16px 48px -8px rgb(9 30 66 / 0.24);

  /* --- 레이아웃 규격 (모드 무관) ----------------------------------------- */
  --layout-sidebar-width: 240px;
  --layout-sidebar-collapsed-width: 56px;
  --layout-rail-width: 56px;
  --layout-topbar-height: 48px;
  --layout-right-panel-width: 360px;
  --layout-right-panel-wide-width: 480px;
  --layout-content-max-width: 1440px;
  --layout-page-padding-x: 24px;
  --layout-page-padding-y: 20px;

  /* --- 컨트롤 높이 ------------------------------------------------------- */
  --control-height-xs: 24px;
  --control-height-sm: 28px;
  --control-height-md: 32px;
  --control-height-lg: 36px;
  --row-height-compact: 32px;
  --row-height-default: 40px;
  --row-height-relaxed: 48px;

  /* --- 모션 -------------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 260ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);



  /* --- 사이드바 전용 색 --------------------------------------------------
     사이드바는 본문과 밝기가 다를 수 있어야 합니다(슬랙식 어두운 사이드바).
     전역 fg 토큰을 그대로 쓰면 배경만 어둡게 했을 때 글자가 사라집니다.
     팔레트가 이 값들을 통째로 덮어써서 밝기를 고릅니다. */
  --color-sidebar-bg: var(--hct-neutral-50);
  --color-sidebar-fg: var(--hct-neutral-900);
  --color-sidebar-fg-muted: var(--hct-neutral-700);
  --color-sidebar-fg-subtle: var(--hct-neutral-600);
  --color-sidebar-hover: var(--hct-neutral-100);
  --color-sidebar-active-bg: var(--color-accent-subtle);
  --color-sidebar-active-fg: var(--color-accent-text);
  --color-sidebar-border: var(--hct-neutral-200);
  --color-sidebar-badge-bg: var(--color-danger-solid);
  --color-sidebar-badge-fg: #FFFFFF;
  --color-sidebar-rail-bg: var(--hct-neutral-100);

  /* --- 차트 계열 색 (팔레트와 무관하게 고정) ---------------------------
     상태 색을 시리즈 색으로 재사용하지 않기 위해 별도로 둡니다. 차트에서
     초록이 '성공'이 아니라 '3번 시리즈'를 뜻하면 의미 체계가 무너집니다.
     고정 순서로만 배정하고 순환시키지 않습니다 — 7번째 계열은 '기타'로 묶습니다.
     대비·색각 검증을 통과한 값입니다(라이트 표면 #FFFFFF 기준). */
  --chart-1: #2E5FD0;
  --chart-2: #CC6D0C;
  --chart-3: #00907A;
  --chart-4: #7A5AD8;
  --chart-5: #C94FA8;
  --chart-6: #A07B0E;
  --chart-grid: var(--color-border-subtle);
  --chart-axis: var(--color-border-default);

  /* --- 순차형(히트맵) 색 ------------------------------------------------
     "많다/적다" 를 진하기로 보여줍니다. 계열 색과 목적이 다릅니다 —
     계열 색은 **무엇인지**, 순차형은 **얼마나인지** 를 말합니다.

     칸에는 항상 숫자가 함께 찍힙니다. 그래서 이 색은 값을 전달하는 유일한
     수단이 아니라 **읽는 속도를 높이는 보조**입니다. 따라서 검사 기준은
     '칸 대 배경' 이 아니라 **칸 위의 글자가 4.5:1 을 넘는가** 입니다
     (WCAG 1.4.11 은 값이 텍스트로 제공되면 적용되지 않습니다).

     마지막 단계에서만 글자색이 뒤집힙니다. 그 짝은 chartTokens.js 의
     CHART_SEQ 가 들고 있으니 화면에서 직접 고르지 마세요. */
  --chart-seq-1: #E9F0FB;
  --chart-seq-2: #C6D8F4;
  --chart-seq-3: #96B4E9;
  --chart-seq-4: #5A88D8;
  --chart-seq-5: #2E5FD0;
  --chart-seq-fg: #0F1419;
  --chart-seq-fg-strong: #FFFFFF;

  /* --- 서체 -------------------------------------------------------------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------------------
   다크 모드 — 시스템 설정을 따르되, 명시적 라이트 선택은 존중
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg-canvas: #0D0F12;
    --color-bg-surface: #16191E;
    --color-bg-raised: #1E2228;
    --color-bg-sunken: #101317;
    --color-bg-hover: #1E2228;
    --color-bg-active: #23272E;
    --color-bg-sidebar: #101317;
    --color-bg-overlay: rgb(0 0 0 / 0.62);

    --color-text-primary: #E6E8EB;
    --color-text-secondary: #A9B0BA;
    --color-text-tertiary: #8A919D;
    --color-text-disabled: #565D69;
    --color-text-inverse: #0D0F12;
    --color-text-link: var(--hct-accent-400);

    --color-border-subtle: #23272E;
    --color-border-default: #2E333B;
    --color-border-strong: #464C56;
    --color-border-focus: var(--hct-accent-400);

    --color-accent-solid: var(--hct-accent-500);
    --color-accent-solid-hover: var(--hct-accent-400);
    --color-accent-subtle: #152238;
    --color-accent-subtle-hover: #1B2C48;
    --color-accent-text: var(--hct-accent-300);
    --color-accent-border: var(--hct-accent-800);

    --color-success-bg: #0F2E1E;
    --color-success-border: #166534;
    --color-success-text: #4ADE80;
    --color-success-solid: #16A34A;

    --color-warning-bg: #33230A;
    --color-warning-border: #92400E;
    --color-warning-text: #FBBF24;
    --color-warning-solid: #D97706;

    --color-danger-bg: #3A1516;
    --color-danger-border: #991B1B;
    --color-danger-text: #F87171;
    --color-danger-solid: #DC2626;

    --color-info-bg: #12233F;
    --color-info-border: #1E40AF;
    --color-info-text: #7CA9FF;
    --color-info-solid: #2563EB;

    --color-neutral-bg: #1E2228;
    --color-neutral-border: #2E333B;
    --color-neutral-text: #A9B0BA;
    --color-neutral-solid: #646B77;

    --color-review-bg: #241640;
    --color-review-border: #5B21B6;
    --color-review-text: #B292FA;
    --color-review-solid: #7C3AED;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.6);
    --shadow-overlay: 0 16px 48px -8px rgb(0 0 0 / 0.7);


  /* 사이드바 — 다크 */
  --color-sidebar-bg: var(--color-bg-sunken);
  --color-sidebar-fg: var(--color-text-primary);
  --color-sidebar-fg-muted: var(--color-text-secondary);
  --color-sidebar-fg-subtle: var(--color-text-tertiary);
  --color-sidebar-hover: var(--color-bg-hover);
  --color-sidebar-active-bg: var(--color-accent-subtle);
  --color-sidebar-active-fg: var(--color-accent-text);
  --color-sidebar-border: var(--color-border-subtle);
  --color-sidebar-badge-bg: var(--color-danger-solid);
  --color-sidebar-badge-fg: #FFFFFF;
  --color-sidebar-rail-bg: var(--color-bg-canvas);

  /* 차트 계열 색 — 다크는 밝기만 올린 게 아니라 별도로 고른 단계입니다
     (다크 표면 기준으로 대비·색각 검증을 다시 통과한 값) */
  --chart-1: #5B8CF5;
  --chart-2: #CE7418;
  --chart-3: #0FA184;
  --chart-4: #9478F5;
  --chart-5: #D2519F;
  --chart-6: #9E7B0A;

  /* 순차형 — 다크에서는 어두운 쪽에서 밝은 쪽으로 오릅니다.
     글자는 1~4단계에서 밝은색, 5단계에서만 어두운색입니다. */
  --chart-seq-1: #1B2A44;
  --chart-seq-2: #243A62;
  --chart-seq-3: #2F5289;
  --chart-seq-4: #39619F;
  --chart-seq-5: #5B8CF5;
  --chart-seq-fg: #E6EAF0;
  --chart-seq-fg-strong: #0F1419;

  }
}

/* ---------------------------------------------------------------------------
   다크 모드 — 사용자가 직접 선택한 경우 (토글이 항상 이깁니다)
   위 미디어 쿼리와 값이 동일해야 합니다.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0D0F12;
  --color-bg-surface: #16191E;
  --color-bg-raised: #1E2228;
  --color-bg-sunken: #101317;
  --color-bg-hover: #1E2228;
  --color-bg-active: #23272E;
  --color-bg-sidebar: #101317;
  --color-bg-overlay: rgb(0 0 0 / 0.62);

  --color-text-primary: #E6E8EB;
  --color-text-secondary: #A9B0BA;
  --color-text-tertiary: #8A919D;
  --color-text-disabled: #565D69;
  --color-text-inverse: #0D0F12;
  --color-text-link: var(--hct-accent-400);

  --color-border-subtle: #23272E;
  --color-border-default: #2E333B;
  --color-border-strong: #464C56;
  --color-border-focus: var(--hct-accent-400);

  --color-accent-solid: var(--hct-accent-500);
  --color-accent-solid-hover: var(--hct-accent-400);
  --color-accent-subtle: #152238;
  --color-accent-subtle-hover: #1B2C48;
  --color-accent-text: var(--hct-accent-300);
  --color-accent-border: var(--hct-accent-800);

  --color-success-bg: #0F2E1E;
  --color-success-border: #166534;
  --color-success-text: #4ADE80;
  --color-success-solid: #16A34A;

  --color-warning-bg: #33230A;
  --color-warning-border: #92400E;
  --color-warning-text: #FBBF24;
  --color-warning-solid: #D97706;

  --color-danger-bg: #3A1516;
  --color-danger-border: #991B1B;
  --color-danger-text: #F87171;
  --color-danger-solid: #DC2626;

  --color-info-bg: #12233F;
  --color-info-border: #1E40AF;
  --color-info-text: #7CA9FF;
  --color-info-solid: #2563EB;

  --color-neutral-bg: #1E2228;
  --color-neutral-border: #2E333B;
  --color-neutral-text: #A9B0BA;
  --color-neutral-solid: #646B77;

  --color-review-bg: #241640;
  --color-review-border: #5B21B6;
  --color-review-text: #B292FA;
  --color-review-solid: #7C3AED;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.6);
  --shadow-overlay: 0 16px 48px -8px rgb(0 0 0 / 0.7);


  /* 사이드바 — 다크 */
  --color-sidebar-bg: var(--color-bg-sunken);
  --color-sidebar-fg: var(--color-text-primary);
  --color-sidebar-fg-muted: var(--color-text-secondary);
  --color-sidebar-fg-subtle: var(--color-text-tertiary);
  --color-sidebar-hover: var(--color-bg-hover);
  --color-sidebar-active-bg: var(--color-accent-subtle);
  --color-sidebar-active-fg: var(--color-accent-text);
  --color-sidebar-border: var(--color-border-subtle);
  --color-sidebar-badge-bg: var(--color-danger-solid);
  --color-sidebar-badge-fg: #FFFFFF;
  --color-sidebar-rail-bg: var(--color-bg-canvas);

  /* 차트 계열 색 — 다크는 밝기만 올린 게 아니라 별도로 고른 단계입니다
     (다크 표면 기준으로 대비·색각 검증을 다시 통과한 값) */
  --chart-1: #5B8CF5;
  --chart-2: #CE7418;
  --chart-3: #0FA184;
  --chart-4: #9478F5;
  --chart-5: #D2519F;
  --chart-6: #9E7B0A;

  /* 순차형 — 다크에서는 어두운 쪽에서 밝은 쪽으로 오릅니다.
     글자는 1~4단계에서 밝은색, 5단계에서만 어두운색입니다. */
  --chart-seq-1: #1B2A44;
  --chart-seq-2: #243A62;
  --chart-seq-3: #2F5289;
  --chart-seq-4: #39619F;
  --chart-seq-5: #5B8CF5;
  --chart-seq-fg: #E6EAF0;
  --chart-seq-fg-strong: #0F1419;

}