/*
  킹샷 디자인 시스템 — 토큰 (0단계 / M0a)
  ────────────────────────────────────────────────────────────────────────────
  본 파일은 색·라운드·간격·타이포·그림자의 단일 출처(Single Source of Truth).
  라이트/다크 양쪽 변수를 모두 정의해 [data-bs-theme]에 따라 자동 분기된다.
  Bootstrap 5 변수(--bs-*)에 매핑하여 기존 .btn / .card / .form-control 등이
  별도 수정 없이 새 팔레트를 자연스럽게 따른다.

  컴포넌트 단위 정렬·셸 레이아웃은 별도 단계(M0b / M0c)에서 진행하므로,
  본 단계에서는 토큰과 Bootstrap 매핑만 다룬다.

  로드 순서 (base.html 기준):
    bootstrap.min.css → bootstrap-icons.css → tokens.css → style.css
  - Bootstrap 뒤, style.css 앞에 위치해야 두 가지 모두 덮어쓸 수 있다.
*/

/* ───────────────────────────────────────────────────────────────────────────
   1. 비테마 토큰 (라이트/다크 공통)
   라운드/간격/타이포/그림자는 테마와 무관하게 한 벌만 정의한다.
   ─────────────────────────────────────────────────────────────────────── */
:root {
    /* 라운드 — 카드/패널 12px, 버튼/입력 8px 기본 */
    --ks-r-sm: 6px;
    --ks-r-md: 8px;
    --ks-r-lg: 12px;
    --ks-r-xl: 16px;
    --ks-r-pill: 999px;

    /* 간격 (4px 단위 스케일) */
    --ks-s-1: 4px;
    --ks-s-2: 8px;
    --ks-s-3: 12px;
    --ks-s-4: 16px;
    --ks-s-5: 24px;
    --ks-s-6: 32px;
    --ks-s-7: 48px;

    /* 타이포 */
    --ks-fs-xs: 12px;
    --ks-fs-sm: 13px;
    --ks-fs-base: 14px;
    --ks-fs-md: 16px;
    --ks-fs-lg: 18px;
    --ks-fs-h3: 20px;
    --ks-fs-h2: 24px;
    --ks-fs-h1: 28px;
    --ks-fw-normal: 400;
    --ks-fw-med: 500;
    --ks-fw-semi: 600;
    --ks-fw-bold: 700;

    /* 그림자 — 옅게 한 단계만 사용 (디자인 시스템에서 합의된 정책) */
    --ks-shadow-1: 0 1px 2px rgba(20, 23, 32, 0.04), 0 0 0 1px rgba(20, 23, 32, 0.04);
    --ks-shadow-2: 0 4px 12px rgba(20, 23, 32, 0.06);
    --ks-shadow-pop: 0 12px 32px rgba(20, 23, 32, 0.10);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. 라이트 테마 색상
   :root 와 [data-bs-theme="light"] 모두에 적용해 기본값/명시값 양쪽을 커버.
   ─────────────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    /* 액센트 — primary 단일 (보라) */
    --ks-primary: #7B5CFF;
    --ks-primary-hover: #6A4AF0;
    --ks-primary-soft: #EFEAFF;       /* 사이드바 활성 배경, 배지에 사용 */
    --ks-primary-on-soft: #4F3CC9;    /* primary-soft 위 텍스트 */

    /* 표면 (페이지 → 카드 → 보조 표면) */
    --ks-bg: #F5F6F8;                 /* 페이지 배경 (회색) */
    --ks-surface: #FFFFFF;            /* 카드/패널 */
    --ks-surface-2: #FAFBFC;          /* 입력/2차 표면 */
    --ks-border: #E6E8EC;
    --ks-border-strong: #D2D6DC;

    /* 텍스트 — muted/subtle 은 라이트 배경에서도 충분한 대비를 확보(WCAG AA 이상) */
    --ks-text: #1F2330;
    --ks-text-muted: #525763;
    --ks-text-subtle: #7A8290;

    /* 신호색 4종 — 채도를 낮춰 라이트 표면에 자연스럽게 어울리게 */
    --ks-success: #2E7D5B;  --ks-success-soft: #E6F4EE;
    --ks-warning: #B26A00;  --ks-warning-soft: #FCF1E0;
    --ks-danger:  #C0392B;  --ks-danger-soft:  #FBE9E7;
    --ks-info:    #1E66C9;  --ks-info-soft:    #E6EFFB;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. 다크 테마 색상
   primary 는 양쪽 동일(보라)로 유지하고, 표면/텍스트/신호색만 어두운 톤으로.
   ─────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    /* 액센트 — primary 자체는 동일, hover 만 라이트보다 살짝 밝게 */
    --ks-primary: #7B5CFF;
    --ks-primary-hover: #8C70FF;
    --ks-primary-soft: #2A2147;
    --ks-primary-on-soft: #BFB1FF;

    /* 표면 */
    --ks-bg: #0F1116;
    --ks-surface: #181B22;
    --ks-surface-2: #1F232C;
    --ks-border: #2A2F3A;
    --ks-border-strong: #3A4150;

    /* 텍스트 */
    --ks-text: #E7E9EE;
    --ks-text-muted: #9AA3B2;
    --ks-text-subtle: #6B7280;

    /* 신호색 — 본 색은 살짝 밝게, soft 배경은 어둡게 */
    --ks-success: #4FB389;  --ks-success-soft: #19372C;
    --ks-warning: #E1A04A;  --ks-warning-soft: #3A2C15;
    --ks-danger:  #E07368;  --ks-danger-soft:  #3A1F1C;
    --ks-info:    #6BA8F0;  --ks-info-soft:    #14253E;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Bootstrap 5 변수 매핑
   Bootstrap 컴포넌트(.btn, .card, .form-control, .alert 등)는 --bs-* 변수로
   색을 결정한다. 우리 토큰을 그대로 연결해 컴포넌트 코드 수정 없이 팔레트 전환.
   라이트/다크 모두 동일 매핑을 적용 — 변수 값 자체가 테마별로 분기되므로
   매핑 한 번이면 양쪽이 같이 바뀐다.
   ─────────────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /* primary 계열 — 버튼·링크·체크박스 활성색 등에 영향 */
    --bs-primary: var(--ks-primary);
    /* primary RGB — Bootstrap이 rgba(var(--bs-primary-rgb), .x) 형태로 사용.
       라이트/다크가 동일 #7B5CFF 이므로 한 값으로 충분. */
    --bs-primary-rgb: 123, 92, 255;

    --bs-link-color: var(--ks-primary);
    --bs-link-color-rgb: 123, 92, 255;
    --bs-link-hover-color: var(--ks-primary-hover);

    /* 페이지 본문 — body 배경/텍스트 */
    --bs-body-bg: var(--ks-bg);
    --bs-body-color: var(--ks-text);

    /* 보조 텍스트 — .text-muted, .text-secondary 등 */
    --bs-secondary-color: var(--ks-text-muted);
    --bs-tertiary-color: var(--ks-text-subtle);

    /* 보조 표면 — .bg-body-tertiary 등 */
    --bs-tertiary-bg: var(--ks-surface-2);

    /* 테두리 — .border, .form-control 등 */
    --bs-border-color: var(--ks-border);
    --bs-border-color-translucent: var(--ks-border);

    /* 신호색 — alert/badge/btn-* 에 영향 */
    --bs-success: var(--ks-success);
    --bs-success-rgb: 46, 125, 91;     /* #2E7D5B */
    --bs-warning: var(--ks-warning);
    --bs-warning-rgb: 178, 106, 0;     /* #B26A00 */
    --bs-danger: var(--ks-danger);
    --bs-danger-rgb: 192, 57, 43;      /* #C0392B */
    --bs-info: var(--ks-info);
    --bs-info-rgb: 30, 102, 201;       /* #1E66C9 */
}

/* 다크 테마에서는 신호색 본 색이 밝아지므로 RGB 도 갱신 */
[data-bs-theme="dark"] {
    --bs-success-rgb: 79, 179, 137;    /* #4FB389 */
    --bs-warning-rgb: 225, 160, 74;    /* #E1A04A */
    --bs-danger-rgb: 224, 115, 104;    /* #E07368 */
    --bs-info-rgb: 107, 168, 240;      /* #6BA8F0 */
}

/* ───────────────────────────────────────────────────────────────────────────
   5. Bootstrap 5.3 컴포넌트 변수 매핑 (.btn-* 계열)
   Bootstrap 5.3는 .btn-primary 등이 자체 컴포넌트 변수(--bs-btn-bg)를 쓰기 때문에
   --bs-primary 매핑만으로는 색이 바뀌지 않는다. 각 변형에 직접 토큰을 주입해
   기존 컴포넌트 코드를 건드리지 않고 새 팔레트를 강제 적용한다.

   M0a 범위: filled/outline 두 변형의 primary + 신호색 4종.
   alert/badge 등은 M0c 에서 일괄 정렬한다.
   ─────────────────────────────────────────────────────────────────────── */

/* primary — 보라 액센트 */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ks-primary);
    --bs-btn-border-color: var(--ks-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ks-primary-hover);
    --bs-btn-hover-border-color: var(--ks-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ks-primary-hover);
    --bs-btn-active-border-color: var(--ks-primary-hover);
    --bs-btn-focus-shadow-rgb: 123, 92, 255;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ks-primary);
    --bs-btn-disabled-border-color: var(--ks-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--ks-primary);
    --bs-btn-border-color: var(--ks-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ks-primary);
    --bs-btn-hover-border-color: var(--ks-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ks-primary);
    --bs-btn-active-border-color: var(--ks-primary);
    --bs-btn-focus-shadow-rgb: 123, 92, 255;
    --bs-btn-disabled-color: var(--ks-primary);
    --bs-btn-disabled-border-color: var(--ks-primary);
}

/* success */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ks-success);
    --bs-btn-border-color: var(--ks-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #266b4d;
    --bs-btn-hover-border-color: #266b4d;
    --bs-btn-active-bg: #266b4d;
    --bs-btn-active-border-color: #266b4d;
    --bs-btn-disabled-bg: var(--ks-success);
    --bs-btn-disabled-border-color: var(--ks-success);
}
.btn-outline-success {
    --bs-btn-color: var(--ks-success);
    --bs-btn-border-color: var(--ks-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ks-success);
    --bs-btn-hover-border-color: var(--ks-success);
    --bs-btn-active-bg: var(--ks-success);
    --bs-btn-active-border-color: var(--ks-success);
}

/* danger */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ks-danger);
    --bs-btn-border-color: var(--ks-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a32f23;
    --bs-btn-hover-border-color: #a32f23;
    --bs-btn-active-bg: #a32f23;
    --bs-btn-active-border-color: #a32f23;
    --bs-btn-disabled-bg: var(--ks-danger);
    --bs-btn-disabled-border-color: var(--ks-danger);
}
.btn-outline-danger {
    --bs-btn-color: var(--ks-danger);
    --bs-btn-border-color: var(--ks-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ks-danger);
    --bs-btn-hover-border-color: var(--ks-danger);
    --bs-btn-active-bg: var(--ks-danger);
    --bs-btn-active-border-color: var(--ks-danger);
}

/* warning — 본 색이 어두운 갈색 톤이라 텍스트는 흰색 유지 */
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ks-warning);
    --bs-btn-border-color: var(--ks-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #965a00;
    --bs-btn-hover-border-color: #965a00;
    --bs-btn-active-bg: #965a00;
    --bs-btn-active-border-color: #965a00;
    --bs-btn-disabled-bg: var(--ks-warning);
    --bs-btn-disabled-border-color: var(--ks-warning);
}
.btn-outline-warning {
    --bs-btn-color: var(--ks-warning);
    --bs-btn-border-color: var(--ks-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ks-warning);
    --bs-btn-hover-border-color: var(--ks-warning);
    --bs-btn-active-bg: var(--ks-warning);
    --bs-btn-active-border-color: var(--ks-warning);
}

/* info */
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ks-info);
    --bs-btn-border-color: var(--ks-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1854a8;
    --bs-btn-hover-border-color: #1854a8;
    --bs-btn-active-bg: #1854a8;
    --bs-btn-active-border-color: #1854a8;
    --bs-btn-disabled-bg: var(--ks-info);
    --bs-btn-disabled-border-color: var(--ks-info);
}
.btn-outline-info {
    --bs-btn-color: var(--ks-info);
    --bs-btn-border-color: var(--ks-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ks-info);
    --bs-btn-hover-border-color: var(--ks-info);
    --bs-btn-active-bg: var(--ks-info);
    --bs-btn-active-border-color: var(--ks-info);
}