/* =============================================================================
   분필 디자인 토큰 (Single Source of Truth)
   -----------------------------------------------------------------------------
   색·타이포·여백·모서리·그림자의 단일 기준. 변수 정의만 담으며 컴포넌트 규칙은 없다.
   화면/에디터 어디서 로드해도 무해(:root 변수 선언일 뿐).
   기준 미리보기: /guide/design-system.html
   ============================================================================= */

:root {
  /* ---------- Ground & Surface ---------- */
  --ground: #f4f6fa;        /* 페이지 배경 */
  --surface: #ffffff;       /* 카드·패널 표면 */
  --surface-alt: #f8fafc;   /* 표 헤더 등 옅은 표면 */

  /* ---------- Text ---------- */
  --text: #1e293b;          /* 본문 (= slate-800) */
  --text-muted: #64748b;    /* 보조 (= slate-500) */
  --text-subtle: #74819a;   /* 흐린 (placeholder·장식용, 흰 배경 AA 통과) */

  /* ---------- Brand · 인디고-블루 (기존 #3f6ad8 정제) ---------- */
  --brand-50:  #eef2fd;
  --brand-100: #dbe3fa;
  --brand-200: #b8c8f4;
  --brand-300: #8ba6ec;
  --brand-400: #5b7fe2;
  --brand-500: #3f6ad8;     /* 기본 브랜드색 */
  --brand-600: #3155bd;     /* hover */
  --brand-700: #284598;
  --brand-800: #213a7c;
  --brand-900: #1c3066;

  /* ---------- Slate · 회색조 ---------- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ---------- Semantic (상태 전달 전용) ----------
     색마다 base(아이콘·강조선) / -bg(배경) / -fg(배경 위 텍스트) / -border(테두리) 4종. */
  --success: #15a35b;
  --success-bg: #e7f6ee;
  --success-fg: #0e6e3e;
  --success-border: #bfe6cf;
  --warning: #e0900a;
  --warning-bg: #fdf3e0;
  --warning-fg: #92610a;
  --warning-border: #f5dca6;
  --danger:  #d92550;
  --danger-bg: #fce8ed;
  --danger-fg: #a01a3b;
  --danger-border: #f3c2cf;
  --info:    #0e8fd1;
  --info-bg: #e4f2fb;
  --info-fg: #0a648f;
  --info-border: #b9ddf1;

  /* ---------- Border ---------- */
  --border: #e2e8f0;          /* = slate-200 */
  --border-strong: #cbd5e1;   /* = slate-300 */

  /* ---------- 의미 별칭 (마이그레이션 편의) ---------- */
  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-on-primary: #ffffff;

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;   /* 본문 기본 */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-38: 38px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-base: 1.55;

  /* ---------- Spacing (4px 배수) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---------- Radius ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);  /* 카드 */
  --sh-2: 0 2px 8px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);  /* 드롭다운 */
  --sh-3: 0 8px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06); /* 모달 */

  /* ---------- Editor · 별도 컨텍스트 (도구형 UI) ----------
     색·radius·그림자는 위 토큰을 공유하되, 콘텐츠 페이지엔 없는 도구 표면을 추가 정의. */
  --ed-chrome: var(--surface);     /* 툴바·패널 배경 */
  --ed-canvas: var(--slate-100);   /* 편집 캔버스 배경 (콘텐츠와 구분되는 중립색) */
  --ed-select: var(--brand-500);   /* 선택 요소 외곽선 */
  --ed-menu-bg: var(--slate-800);  /* 플로팅 컨텍스트 메뉴 (어두운 도구 표면) */
  --ed-menu-hover: var(--brand-600);
  --ed-menu-text: var(--slate-100);
  --ed-menu-border: var(--slate-700);
}

/* =============================================================================
   다크 토큰 (정의만 — 토글/출시 보류)
   -----------------------------------------------------------------------------
   [data-theme="dark"] 가 설정될 때만 적용. 현재 토글 UI를 제공하지 않으므로
   기본(라이트) 렌더링에는 전혀 영향이 없다. 기준: /guide/design-system.html
   원칙: brand 200~900·의미색 base 는 모드 무관 동일(액션색 일관), slate 스케일은 반전.
   ============================================================================= */
[data-theme="dark"] {
  /* ---------- Ground & Surface ---------- */
  --ground: #0b1220;
  --surface: #161f33;
  --surface-alt: #1c273d;

  /* ---------- Text ---------- */
  --text: #e6edf6;
  --text-muted: #9fb0c5;
  --text-subtle: #7286a0;

  /* ---------- Brand (옅은 톤만 다크 표면용 재정의, 200~900 동일) ---------- */
  --brand-50:  #1b2a52;
  --brand-100: #22386b;

  /* ---------- Slate · 스케일 반전 (50↔900) ---------- */
  --slate-50:  #0f172a;
  --slate-100: #1e293b;
  --slate-200: #334155;
  --slate-300: #475569;
  --slate-400: #64748b;
  --slate-500: #94a3b8;
  --slate-600: #cbd5e1;
  --slate-700: #e2e8f0;
  --slate-800: #f1f5f9;
  --slate-900: #f8fafc;

  /* ---------- Semantic · base 동일, 배경/텍스트/테두리만 다크 톤 ---------- */
  --success-bg: #10301f;
  --success-fg: #5fd99a;
  --success-border: #205a3a;
  --warning-bg: #332608;
  --warning-fg: #f3c267;
  --warning-border: #6b5014;
  --danger-bg: #371420;
  --danger-fg: #f5a6bb;
  --danger-border: #6e2640;
  --info-bg: #0c2a3d;
  --info-fg: #6cc6ef;
  --info-border: #1d5273;

  /* ---------- Border ---------- */
  --border: #2a3852;
  --border-strong: #3a4a68;

  /* ---------- Elevation · 어두운 표면용 강한 그림자 ---------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 2px 10px rgba(0,0,0,.5);
  --sh-3: 0 12px 32px rgba(0,0,0,.6);
}