/* ENIALMS 3테마 디자인 토큰 — enia(기본)/claude/dark. 색·표면·그림자만 테마별 재정의, 타이포·간격·라운드·모션은 공통 (docs/analysis/design-input.md §3) */

/* Pretendard Variable (자체 호스팅) — 본문·제목 전 영역. front/admin 양쪽에서 로드되도록 theme.css가 소유한다 */
@font-face {
  font-family: "Pretendard";
  src: url("../vendor/pretendard/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono (latin, 자체 호스팅) — 코드·데이터·eyebrow 라벨용. 한글 본문은 Pretendard */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/plexmono/plexmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/plexmono/plexmono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/plexmono/plexmono-600.woff2") format("woff2");
}

/* ── 기본 테마: enia (data-theme 미지정 시 항상 적용 — JS 실패 안전망) ── */
:root {
  /* 브랜드 */
  --brand: #20a7d4;
  --brand-hover: #1b8cb3;
  --brand-active: #176f8f;
  --brand-subtle: #eaf7fb;
  --brand-rgb: 32, 167, 212;
  --accent: #f29919;
  --accent-hover: #d07d0e;
  --accent-subtle: #fef4e6;
  --accent-rgb: 242, 153, 25;
  --gradient-brand: linear-gradient(100deg, #20a7d4 0%, #3ab4da 45%, #f29919 100%);

  /* 텍스트 */
  --text-strong: #1d1f21;
  --text-body: #52565a;
  --text-muted: #8b9096;
  --text-inverse: #ffffff;
  --text-brand: #1b8cb3;
  --text-on-brand: #ffffff;

  /* 표면 */
  --surface-page: #f7f8f9;
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eef0f2;
  --surface-inverse: #1d1f21;

  /* 테두리·포커스 */
  --border-subtle: #dde0e3;
  --border-default: #c4c8cd;
  --border-strong: #a7acb2;
  --border-brand: #20a7d4;
  --focus-ring: rgba(32, 167, 212, .45);

  /* 상태색 */
  --success: #1fa971;
  --success-subtle: #e7f6ef;
  --warning: #f29919;
  --warning-subtle: #fef4e6;
  --danger: #e2483d;
  --danger-subtle: #fbeae9;
  --info: #20a7d4;
  --info-subtle: #eaf7fb;

  /* 그림자 */
  --shadow-xs: 0 1px 2px rgba(29, 31, 33, .05);
  --shadow-sm: 0 1px 3px rgba(29, 31, 33, .08), 0 1px 2px rgba(29, 31, 33, .04);
  --shadow-md: 0 8px 24px rgba(29, 31, 33, .10);
  --shadow-lg: 0 16px 40px rgba(29, 31, 33, .14);
  --shadow-brand: 0 8px 24px rgba(32, 167, 212, .28);
  --shadow-accent: 0 8px 24px rgba(242, 153, 25, .28);

  /* ── 테마 불변 토큰 (3테마 공통 — 여기 1곳에만 정의) ── */
  /* 폰트: Pretendard 전면 통일(A안 — 한글 서비스·CSP self·eniavod 선례), 모노는 IBM Plex Mono+시스템 폴백 */
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-display: var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 타입 스케일(px 기준) */
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px;
  --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-4xl: 48px; --fs-5xl: 60px;
  --lh-tight: 1.1; --lh-snug: 1.28; --lh-normal: 1.5; --lh-relaxed: 1.7;
  --ls-tight: -0.02em; --ls-wide: 0.04em; --ls-eyebrow: 0.18em;

  /* 간격 (4px 그리드) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* 라운드 */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-pill: 999px;

  /* 모션 (바운스 금지) */
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── claude 테마: 따뜻한 크림/코랄 (Anthropic 톤 영감 자체 팔레트) ── */
:root[data-theme="claude"] {
  --brand: #cc785c;
  --brand-hover: #b35e42;
  --brand-active: #954b34;
  --brand-subtle: #f3e1d8;
  --brand-rgb: 204, 120, 92;
  --accent: #c08a3e;
  --accent-hover: #a6721f;
  --accent-subtle: #f6ecd9;
  --accent-rgb: 192, 138, 62;
  --gradient-brand: linear-gradient(100deg, #cc785c 0%, #d99a78 45%, #c08a3e 100%);

  --text-strong: #33291f;
  --text-body: #5c5142;
  --text-muted: #8c8272;
  --text-inverse: #fdfbf7;
  --text-brand: #b35e42;
  --text-on-brand: #ffffff;

  --surface-page: #f5f1e8;
  --surface-card: #fffefb;
  --surface-raised: #ffffff;
  --surface-sunken: #ece4d4;
  --surface-inverse: #33291f;

  --border-subtle: #e4dbc8;
  --border-default: #d3c7ae;
  --border-strong: #b8aa8c;
  --border-brand: #cc785c;
  --focus-ring: rgba(204, 120, 92, .45);

  --success: #4c8b63;
  --success-subtle: #e6f0e9;
  --warning: #c08a3e;
  --warning-subtle: #f6ecd9;
  --danger: #b3483a;
  --danger-subtle: #f5e4e0;
  --info: #6e7f9e;
  --info-subtle: #e9edf4;

  --shadow-xs: 0 1px 2px rgba(51, 41, 31, .05);
  --shadow-sm: 0 1px 3px rgba(51, 41, 31, .08), 0 1px 2px rgba(51, 41, 31, .04);
  --shadow-md: 0 8px 24px rgba(51, 41, 31, .10);
  --shadow-lg: 0 16px 40px rgba(51, 41, 31, .14);
  --shadow-brand: 0 8px 24px rgba(204, 120, 92, .28);
  --shadow-accent: 0 8px 24px rgba(192, 138, 62, .28);
}

/* ── dark 테마: 중립 다크 표면 + 밝힌 블루/오렌지 ── */
:root[data-theme="dark"] {
  --brand: #3ab4da;
  --brand-hover: #63c6e2;
  --brand-active: #9ddaed;
  --brand-subtle: #123f4e;
  --brand-rgb: 58, 180, 218;
  --accent: #f4a62f;
  --accent-hover: #f6b44f;
  --accent-subtle: #5e390e;
  --accent-rgb: 244, 166, 47;
  --gradient-brand: linear-gradient(100deg, #3ab4da 0%, #63c6e2 45%, #f4a62f 100%);

  --text-strong: #f5f6f7;
  --text-body: #c4c8cd;
  --text-muted: #8b9096;
  --text-inverse: #1d1f21;
  --text-brand: #63c6e2;
  --text-on-brand: #ffffff;

  --surface-page: #14181c;
  --surface-card: #1c2126;
  --surface-raised: #22282e;
  --surface-sunken: #0e1114;
  --surface-inverse: #f7f8f9;

  --border-subtle: rgba(255, 255, 255, .08);
  --border-default: rgba(255, 255, 255, .14);
  --border-strong: rgba(255, 255, 255, .22);
  --border-brand: #3ab4da;
  --focus-ring: rgba(58, 180, 218, .5);

  --success: #34c48d;
  --success-subtle: rgba(31, 169, 113, .15);
  --warning: #f4a62f;
  --warning-subtle: rgba(242, 153, 25, .15);
  --danger: #ea6b62;
  --danger-subtle: rgba(226, 72, 61, .15);
  --info: #3ab4da;
  --info-subtle: rgba(32, 167, 212, .15);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  --shadow-brand: 0 8px 24px rgba(32, 167, 212, .35);
  --shadow-accent: 0 8px 24px rgba(244, 166, 47, .35);
}

/* ══════════════════════════════════════════════════════════════
   레거시 브리지 — 구 JVLMS 변수명(--teal, --g50 …)을 3테마 토큰에 연결한다.
   기존 CSS·템플릿의 var() 참조가 즉시 테마를 추종하게 하는 유일한 정의 지점이며,
   front.css/admin.css의 :root 중복 정의는 제거했다(여기가 단일 진실).
   신규 코드는 별칭이 아니라 위의 시맨틱 토큰을 직접 사용할 것.
   매핑 근거: docs/design/color-mapping.md
   ══════════════════════════════════════════════════════════════ */
:root {
  /* 파생 토큰 — 3테마 모두 어둡게 유지되는 크롬(관리자 사이드바·푸터·플레이어 헤더) */
  --chrome-bg: var(--surface-inverse);
  --chrome-fg: var(--text-inverse);
  --chrome-border: rgba(255, 255, 255, .08);
  /* 히어로 사진 위 스크림 농도(텍스트 대비 확보) */
  --hero-scrim: .45;
  /* 오렌지/골드 계열 accent는 3테마 모두 밝은 색 — 그 위 텍스트는 어두운 값 고정이 대비상 유리 */
  --text-on-accent: #1d1f21;

  /* 브랜드·상태 별칭 */
  --navy: var(--text-strong);
  --teal: var(--brand);
  --teal-l: var(--brand-hover);
  --tl: var(--brand-hover);
  --blue: var(--brand);
  --green: var(--success);
  --green-l: var(--success);
  --gl: var(--accent);
  --red: var(--danger);
  --grad: var(--gradient-brand);
  /* 구 --accent(#BE9F55 골드)는 재정의하지 않는다 — 위 --accent(오렌지)를 그대로 상속 */

  /* 뉴트럴 스케일 */
  --g50: var(--surface-sunken);
  --g100: var(--surface-sunken);
  --g200: var(--border-subtle);
  --g300: var(--border-default);
  --g400: var(--text-muted);
  --g500: var(--text-muted);
  --g600: var(--text-body);
  --g700: var(--text-body);
  --g800: var(--text-strong);
  --g900: var(--text-strong);

  /* 표면·그림자·라운드 */
  --bg: var(--surface-page);
  --cbg: var(--surface-card);
  --sb: var(--chrome-bg);
  --sbbd: var(--chrome-border);
  --shs: var(--shadow-md);
  --r: var(--radius-md);
  --rs: var(--radius-sm);
}

:root[data-theme="claude"] {
  --hero-scrim: .5;
}

:root[data-theme="dark"] {
  /* 다크에서 --surface-inverse는 밝은 값이므로 크롬은 sunken 계열로 뒤집는다 */
  --chrome-bg: var(--surface-sunken);
  --chrome-fg: var(--text-strong);
  --hero-scrim: .58;
}