/* 🔴 출처: O:\CLAUDE\admin\Design\design-system\tokens\tokens-uone-v1.0.css
   (디자인팀 정본, 2026-09-27 복사 — 이 파일 자체는 안 고침, 원본 그대로) */
/*
  유원시스템 디자인 시스템 — 토큰 v1.0 (D/F 확정안)
  ===========================================================================
  CHANGELOG
  v1.0  2026-09-18  사장님 확정(#D-09 00:55 "D앵커+F스타일", #D-10 01:40 "② 기준 F"
                     최종 유지 — 더 밝은/더 어두운 변형 비교 후 원안 그대로 채택,
                     https://claude.ai/artifact/HTdyM3KaLAmHPRJk7zoeDp)
  ===========================================================================

  출처:
  - 앵커·버튼색 4개는 사장님이 직접 고른 값(스케일에 강제로 끼워맞추지 않음):
    앵커 #5CB8FF, 진한 파랑 #1273DE, 네이비 #0B3D91, 연한 채움(F) #B6E3FF
  - 7단계 블루·쿨그레이 스케일은 scales.py로 앵커(#5CB8FF)에서 OKLCH 명도 파생
    (design-system/patterns/settings-form.md, button-primary-DF.md 근거 문서)
  - 주 버튼 전 상태(기본/호버/눌림/포커스/비활성/로딩) 명세: button-primary-DF.md
  - 대비 전부 실측(sRGB 상대휘도 공식) — 지어낸 값 없음

  사용법: 문서 계열 제품(메뉴얼의신 등)이 이 파일을 <link>로 불러오거나
  :root 블록만 기존 CSS 상단에 붙여넣는다. 뮤직 계열은 아직 사장님이
  주황 유지 vs 블루 통합을 결정하지 않아 별도 파일(tokens-uone-music-v1.0.css,
  결정 대기)로 분리해뒀다 — 이 파일을 뮤직 제품에 바로 적용하지 말 것.
*/

:root {
  /* ── 블루 스케일 (한 색상, 일곱 명도 — 앵커 #5CB8FF에서 파생) ────────── */
  --blue-50:  #eaf9ff;
  --blue-100: #d4efff;
  --blue-200: #aadeff;
  --blue-300: #77c2ff;
  --blue-500: #2c8dd1;
  --blue-700: #005fa0;
  --blue-900: #002f65;

  /* ── 쿨 그레이 스케일 (블루 쪽으로 살짝 틀어짐) ───────────────────── */
  --grey-50:  #f6fbff;
  --grey-100: #eef2f6;
  --grey-200: #e1e5e9;
  --grey-300: #cdd1d5;
  --grey-400: #aaaeb2;
  --grey-500: #83878a;
  --grey-600: #606467;
  --grey-700: #45484b;
  --grey-800: #26292c;
  --grey-900: #111417;

  /* ── 사장님 지정 4값 (버튼 전용 — 스케일 밖) ──────────────────────── */
  --df-anchor: #5CB8FF;       /* 주 버튼 테두리, 포커스 링(다크), 강조 아이콘 */
  --df-link:   #1273DE;       /* 링크, 섹션 타이틀 바, PDF 밴드, 포커스 링(라이트) */
  --df-navy:   #0B3D91;       /* 주 버튼 글자(라이트) */
  --df-pale:   #B6E3FF;       /* 주 버튼 채움(라이트) */

  /* ── 라이트 테마 (기본) ────────────────────────────────────────────── */
  --bg: var(--grey-50);
  --surface: #ffffff;
  --surface-2: var(--blue-50);
  --surface-3: var(--blue-100);
  --border: var(--grey-200);
  --border-strong: var(--grey-300);
  --text: var(--grey-900);
  --text-dim: var(--grey-600);
  --link: var(--df-link);
  --focus-ring: var(--df-link);

  /* 주 버튼(F스타일) */
  --action-primary-fill: var(--df-pale);
  --action-primary-text: var(--df-navy);
  --action-primary-border: var(--df-anchor);
  --action-primary-hover: #96D4FF;
  --action-primary-active: #85C1F5;

  /* 보조/고스트(채움 없음 — 주 버튼과 절대 안 섞이게) */
  --action-secondary-border: var(--grey-300);
  --action-secondary-text: var(--text);
  --action-ghost-text: var(--text-dim);

  /* 탭/칩 선택 상태(버튼과 구분되는 옅은 값) */
  --tab-selected-bg: var(--blue-50);
  --tab-selected-text: var(--df-link);
  --chip-selected-bg: var(--blue-100);
  --chip-selected-border: var(--df-anchor);

  /* 상태색 (색 체계 밖, 시리즈 UI 설계표준 §1과 공유 — 이번 변경 대상 아님) */
  --success: #0E9F6E;
  --warn: #D97706;
  --warn-soft: #FDF1E1;
  --danger: #DC2626;
  --danger-soft: #FCEAEA;
  --action-get: #22c55e;   /* 초록=결과물 획득, 시리즈 공용 */
  --action-redo: #2b7fff;  /* 파랑=다시 하기 — df-link와 혼동 주의, 용도가 다름[확인 필요] */
  --action-partial: #a855f7; /* 보라=부분 수정 */

  /* 인쇄물(PDF) — 테마 구분 없음, 라이트 기준 고정 */
  --pdf-band: var(--df-link);      /* 표지 상단 밴드, 소제목 밑줄 */
  --pdf-bg: var(--df-navy);        /* 표지 배경 */
  --pdf-heading: var(--df-link);   /* 본문 소제목(구 365F91/4F81BD 대체) */
}

:root[data-theme="dark"],
.theme-dark {
  --bg: var(--grey-900);
  --surface: var(--grey-800);
  --surface-2: #1a2333;
  --surface-3: #213047;
  --border: #3a3e42;
  --border-strong: #4a4e52;
  --text: var(--grey-50);
  --text-dim: var(--blue-300);
  --link: var(--df-anchor);
  --focus-ring: var(--df-anchor);

  /* 주 버튼(F스타일 다크 등가물 — "은은하게 빛나는" 제안, button-primary-DF.md 근거) */
  --action-primary-fill: #1A3660;
  --action-primary-text: var(--df-pale);
  --action-primary-border: var(--df-anchor);
  --action-primary-hover: #2A5688;
  --action-primary-active: #122848;

  --action-secondary-border: #4a4e52;
  --action-secondary-text: var(--text);
  --action-ghost-text: var(--blue-300);

  --tab-selected-bg: #1a2333;
  --tab-selected-text: var(--df-anchor);
  --chip-selected-bg: #1a2333;
  --chip-selected-border: var(--df-anchor);

  --success: #22C58E;
  --warn: #F0A93B;
  --warn-soft: #D9770626;
  --danger: #FF6B6B;
  --danger-soft: #DC262626;
}

/* 기기 설정을 따르는 경우(사용자가 밝게/어둡게를 명시적으로 고르지 않았을 때) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: var(--grey-900);
    --surface: var(--grey-800);
    --surface-2: #1a2333;
    --surface-3: #213047;
    --border: #3a3e42;
    --border-strong: #4a4e52;
    --text: var(--grey-50);
    --text-dim: var(--blue-300);
    --link: var(--df-anchor);
    --focus-ring: var(--df-anchor);
    --action-primary-fill: #1A3660;
    --action-primary-text: var(--df-pale);
    --action-primary-border: var(--df-anchor);
    --action-primary-hover: #2A5688;
    --action-primary-active: #122848;
    --action-secondary-border: #4a4e52;
    --action-secondary-text: var(--text);
    --action-ghost-text: var(--blue-300);
    --tab-selected-bg: #1a2333;
    --tab-selected-text: var(--df-anchor);
    --chip-selected-bg: #1a2333;
    --chip-selected-border: var(--df-anchor);
    --success: #22C58E;
    --warn: #F0A93B;
    --warn-soft: #D9770626;
    --danger: #FF6B6B;
    --danger-soft: #DC262626;
  }
}

/* 컨트롤 치수 (design-system/patterns/settings-form.md 실측 근거) */
:root {
  --radius-card: 16px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --ctl-height: 44px;      /* 버튼 최소 높이, 터치 타겟 */
  --ctl-height-sm: 36px;
  --sidebar-width: 220px;  /* 설정 화면 좌측 내비 */
  --sidebar-width-collapsed: 64px;
}