/* ================================================================
   theme.css — 디자인 토큰 & 테마
   역할  : CSS 변수 정의, 라이트/다크/커스텀 테마 처리
   수정  : 이 파일만 수정하면 전체 색상·폰트·크기 일괄 반영
================================================================ */

/* ── 1. Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 2. 디자인 토큰 (라이트 기본값) ── */
:root {
  /* 배경 계층 */
  --bg  : #ffffff;
  --bg2 : #f5f5f3;
  --bg3 : #efefec;

  /* 텍스트 계층 */
  --tx1 : #1a1a18;
  --tx2 : #6b6b66;
  --tx3 : #a0a09a;

  /* 테두리 */
  --bd  : rgba(0, 0, 0, 0.12);
  --bd2 : rgba(0, 0, 0, 0.25);

  /* 강조색 */
  --acc  : #4A90D9;
  --acc2 : #357ABD;

  /* 반경 */
  --rm : 8px;
  --rl : 12px;

  /* 그림자 */
  --shadow : 0 2px 16px rgba(0, 0, 0, 0.08);

  /* 설정창에서 덮어쓰는 변수들 */
  --fs-base    : 14px;      /* 글자 크기 */
  --tx-override: inherit;   /* 글자 색상 오버라이드 */
  --cal-max-w  : 1500px;    /* 캘린더 최대 너비 */
}

/* ── 3. 다크 테마 ── */
[data-theme="dark"] {
  --bg  : #1e1e1c;
  --bg2 : #2a2a28;
  --bg3 : #242422;
  --tx1 : #f0efea;
  --tx2 : #9a9a94;
  --tx3 : #6a6a64;
  --bd  : rgba(255, 255, 255, 0.12);
  --bd2 : rgba(255, 255, 255, 0.25);
  --shadow : 0 2px 16px rgba(0, 0, 0, 0.32);
}

/* ── 4. 자동(시스템) 테마 ── */
[data-theme="auto"] { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg  : #1e1e1c;
    --bg2 : #2a2a28;
    --bg3 : #242422;
    --tx1 : #f0efea;
    --tx2 : #9a9a94;
    --tx3 : #6a6a64;
    --bd  : rgba(255, 255, 255, 0.12);
    --bd2 : rgba(255, 255, 255, 0.25);
    --shadow : 0 2px 16px rgba(0, 0, 0, 0.32);
  }
}