/* ============================================================
   hilio-tokens.css — 색·모양 토큰 «단일 출처» (2026-08-28)
   ------------------------------------------------------------
   모든 페이지가 이 파일 하나를 읽는다. hilio.css 를 쓰지 않는 페이지
   (skin·index·privacy·terms 등)도 이 파일만 읽으면 테마가 따라온다.
   ⚠️ 토큰을 다른 곳에 또 적지 말 것 — 두 곳이 되면 한쪽만 고쳐진다.
   ============================================================ */

/* ============================================================
   테마 — 다크가 기본, 라이트는 선택 (2026-08-28 조은님 지시)
   ------------------------------------------------------------
   색을 「이름」으로 부르고, 그 이름이 가리키는 값만 두 벌 둔다.
   페이지는 var(--hilio-bg) 라고만 쓰면 되고, 낮인지 밤인지는 몰라도 된다.

   비유 — 무대 조명이다. 배우(페이지)는 「내 자리」만 알면 되고,
   낮 장면인지 밤 장면인지에 따라 조명(토큰)이 색을 바꾼다.
   배우가 「나는 파란 옷」이라고 스스로 정해 버리면(색 하드코딩)
   밤 장면에서 안 보인다 — 그래서 페이지에 색을 직접 쓰면 안 된다.

   적용 순서 (2026-08-28 조은님 결정 — 첫 방문은 무조건 다크)
     ① :root                        다크 — 아무것도 고르지 않은 사람이 보는 화면
     ② [data-theme="light"]         사람이 라이트를 골랐을 때만
     ※ 윈도우/폰의 밝기 설정은 «보지 않는다». 따라가게 하면 라이트 모드인 분에게
        다크가 아닌 화면이 떠서, 「기본은 다크」라는 결정과 어긋난다.

   ⚠️ 색을 «여기»에만 정의한다. 미디어쿼리 안에서만 정의된 색이 있으면
      그 조건이 아닐 때 값이 없어져 화면이 깨진다.
   ============================================================ */

:root {
  /* ── 브랜드 (다크 기준: 어두운 바탕에서 읽히도록 한 단계 밝게) ── */
  --hilio-primary:       #2dd4bf;   /* teal-400 */
  --hilio-primary-dark:  #14b8a6;   /* teal-500 */
  --hilio-primary-light: #99f6e4;   /* teal-200 */
  --hilio-accent:        #818cf8;   /* indigo-400 */
  --hilio-accent-light:  #c7d2fe;
  --hilio-gold:          #fbbf24;

  /* ── 바탕과 글자 ── */
  --hilio-bg:           #0f172a;    /* 가장 바깥 바탕 */
  --hilio-bg-soft:      #131c2e;    /* 한 겹 안쪽(섹션) */
  --hilio-bg-dark:      #0b1220;    /* 더 어두운 강조 영역 */
  --hilio-surface:      #1a2338;    /* 카드·패널 */
  --hilio-card:         #1a2338;    /* surface 의 별칭 — 관리자 화면이 이 이름을 쓴다 */
  --hilio-border:       #2b3a55;
  --hilio-text:         #e6edf3;
  --hilio-text-muted:   #94a3b8;
  --hilio-dim:          #94a3b8;    /* text-muted 의 별칭 */
  --hilio-text-inverse: #0f172a;
  /* 상단 띠(반투명) — 뒤가 비치므로 바탕색을 그대로 못 쓴다. 두 벌로 둔다. (2026-09-06) */
  --hilio-nav-bg: rgba(26,35,56,.92);
  /* 브랜드색(민트·보라) «위에» 올라가는 글자.
     다크에서는 브랜드색이 밝으므로 글자는 어두워야 하고,
     라이트에서는 브랜드색이 진하므로 글자가 희어야 한다 — 방향이 정반대다.
     색을 직접 쓰면 어느 한쪽은 반드시 안 보인다(조은님이 사이드바에서 발견). */
  --hilio-on-brand: #06231f;

  /* ── 덧칠(반투명) ──
     이것이 다크/라이트에서 «방향이 뒤집히는» 대표 자리다.
     다크에서는 흰빛을 살짝 얹어 밝히고, 라이트에서는 검은빛을 얹어 누른다.
     rgba(255,255,255,.05) 를 페이지에 직접 쓰면 라이트에서 아무것도 안 보인다. */
  --hilio-overlay:        rgba(255,255,255,.05);
  --hilio-overlay-strong: rgba(255,255,255,.10);

  /* ── 상태 ── */
  --hilio-success: #34d399;
  --hilio-warning: #fbbf24;
  --hilio-danger:  #f87171;
  --hilio-info:    #60a5fa;
  /* 알림 상자 — 바탕은 옅게, 글자는 진하게 */
  --hilio-success-bg: rgba(52,211,153,.12);  --hilio-success-fg: #6ee7b7;
  --hilio-danger-bg:  rgba(248,113,113,.12); --hilio-danger-fg:  #fca5a5;
  --hilio-info-bg:    rgba(96,165,250,.12);  --hilio-info-fg:    #93c5fd;

  /* ── 그림자 ──
     다크에서는 검은 그림자가 «보이지 않는다». 그래서 층을 테두리로 나눈다.
     그림자 값을 아주 약하게 두고, 카드에는 --hilio-border 를 함께 쓴다. */
  --hilio-shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --hilio-shadow:    0 6px 20px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.28);
  --hilio-shadow-lg: 0 20px 50px rgba(0,0,0,.50);

  /* ── 모양·글꼴 (테마와 무관) ── */
  --hilio-radius-sm: 6px;
  --hilio-radius:    12px;
  --hilio-radius-lg: 20px;
  --hilio-radius-xl: 28px;
  --hilio-font: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  --hilio-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --hilio-container: 1180px;

  color-scheme: dark;   /* 스크롤바·기본 폼요소까지 어둡게 */
}

/* ── 라이트는 «사람이 고를 때만» 쓴다 (2026-08-28 조은님 결정) ──
   처음에는 윈도우 설정을 따라가게(@media prefers-color-scheme) 만들었으나,
   조은님이 「시스템과 무관하게 첫 방문은 다크」로 정하셨다.
   그래서 그 미디어쿼리를 걷어냈다 — 하나라도 남으면 윈도우가 라이트인 분에게
   다크가 아닌 화면이 뜬다.
   라이트 값은 아래 [data-theme="light"] 한 곳에만 둔다. */

/* ── 사람이 직접 고른 경우 — 시스템 설정을 이긴다 ────────────
   라이트 값을 한 번 더 적는 이유: 윈도우가 «다크»인데 사람이 «라이트»를
   고르면 위 미디어쿼리가 걸리지 않아 다크가 그대로 남기 때문이다. */
:root[data-theme="light"] {
  --hilio-nav-bg: rgba(255,255,255,.92);
  --hilio-primary:       #0A7F76;   /* 2026-09-06 #0ea5a4 는 흰 바탕 대비 3.03 이라 진하게(4.87) */
  --hilio-primary-dark:  #0f766e;
  --hilio-primary-light: #5eead4;
  --hilio-accent:        #6366f1;
  --hilio-accent-light:  #a5b4fc;
  --hilio-gold:          #f59e0b;

  --hilio-bg:           #ffffff;
  --hilio-bg-soft:      #f8fafc;
  --hilio-bg-dark:      #0f172a;
  --hilio-surface:      #ffffff;
  --hilio-card:         #ffffff;
  --hilio-border:       #e2e8f0;
  --hilio-text:         #0f172a;
  --hilio-text-muted:   #64748b;
  --hilio-dim:          #64748b;
  --hilio-text-inverse: #f8fafc;
  --hilio-on-brand: #ffffff;   /* 진한 브랜드색 위 → 흰 글자 */

  --hilio-overlay:        rgba(15,23,42,.04);
  --hilio-overlay-strong: rgba(15,23,42,.08);

  --hilio-success: #10b981;
  --hilio-warning: #f59e0b;
  --hilio-danger:  #ef4444;
  --hilio-info:    #3b82f6;
  --hilio-success-bg: #d1fae5;  --hilio-success-fg: #065f46;
  --hilio-danger-bg:  #fee2e2;  --hilio-danger-fg:  #991b1b;
  --hilio-info-bg:    #dbeafe;  --hilio-info-fg:    #1e40af;

  --hilio-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --hilio-shadow:    0 6px 20px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --hilio-shadow-lg: 0 20px 50px rgba(15,23,42,.12);

  color-scheme: light;
}

/* 다크를 «직접» 고른 경우 — :root 값이 그대로 다크이므로 표시만 맞춘다. */
:root[data-theme="dark"] { color-scheme: dark; }

/* 테마가 바뀔 때 눈이 아프지 않게 아주 짧게 넘긴다.
   (움직임을 줄이도록 설정한 사용자에게는 끈다) */
@media (prefers-reduced-motion: no-preference) {
  body, .hilio-card, .hilio-nav, .hilio-footer {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }
}