/* LabHub 디자인 토큰 — 모든 화면(SPA · /lang/ · /blog · /tools/)이 공유하는 한 벌.
 *
 * 규칙
 *   1. 실제 값(색·크기·간격)은 이 파일에만 있다. 화면별 CSS 는 var() 만 쓴다.
 *   2. 두 층으로 나눈다.
 *        Primitive  --color-* / --cat-*   HSL 세 값(색조 채도 명도). 투명도가
 *                   필요할 때 hsl(var(--cat) / .13) 꼴로 섞는다.
 *        Semantic   --bg, --text, --accent…  역할 이름. 컴포넌트는 이것만 본다.
 *      다크 모드는 semantic 층만 갈아 끼운다.
 *   3. 표면은 세 단계다.  --bg(바닥) < --surface(카드·패널) < --surface-2(안쪽 칩·코드)
 *      그리고 --surface-3 은 hover 같은 순간 상태에만 쓴다. 카드를 겹겹이 쌓지
 *      말고, 같은 표면 위에서 --border 로 나눈다.
 *   4. 강조색은 인디고 하나. 채도 높은 색은 상태(ok/warn/err)와 러닝패스 카테고리에만.
 *   5. 글자색 대비는 실측값이다(흰 바탕 기준).  --text 18:1 · --dim 8:1 · --dimmer 5.2:1.
 *      본문 크기 글자에는 --dimmer 까지만 쓴다. 그보다 옅은 회색은 장식(구분선)용이다.
 *
 * 테마 선택: <html data-theme="light|dark">. 값이 없으면 시스템 설정을 따른다.
 */

:root {
  color-scheme: light;

  /* ── 글꼴 ── */
  --font-sans: "SUIT Variable", "SUIT", -apple-system, BlinkMacSystemFont, "Pretendard",
               "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ── 크기 스케일 (본문 15px 기준) ── */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-display: clamp(34px, 3.2vw + 18px, 54px);

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.65;
  --lh-loose: 1.8;

  --fw-regular: 450;
  --fw-medium: 550;
  --fw-semibold: 650;
  --fw-bold: 750;
  --fw-black: 820;

  --ls-tight: -.022em;
  --ls-caps: .06em;

  /* ── 간격 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  --gutter: 24px;
  --content: 1200px;

  /* 배우기 카드 한 벌(배우기·과정·코스·대시보드). 로컬 지그(?jig=1)로 밀도를 바꿔 보며 골랐다 —
     최소 너비 300px 이면 1200px 폭에 세 장, 375px 에 한 장이 들어간다. */
  --learn-gap: 16px;
  --learn-min: 300px;
  --learn-pad: 20px;
  --learn-title: 17px;
  --learn-mark: 40px;
  --content-narrow: 860px;
  --content-wide: 1560px;
  --topbar-h: 60px;

  /* ── 라운드 ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;
  --r2: var(--r-lg); /* 옛 이름 */

  /* ── 움직임 ── */
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-pop: cubic-bezier(.2, .9, .3, 1.15);

  /* ── Primitive: 뉴트럴 (아주 옅은 파랑기가 도는 240 계열) ── */
  --color-neutral-0:   0 0% 100%;
  --color-neutral-50:  240 20% 98%;
  --color-neutral-100: 240 14% 96%;
  --color-neutral-200: 240 12% 91%;
  --color-neutral-300: 240 9% 82%;
  --color-neutral-400: 240 6% 62%;
  --color-neutral-500: 240 5% 45%;
  --color-neutral-600: 240 6% 34%;
  --color-neutral-700: 240 7% 25%;
  --color-neutral-800: 232 12% 15%;
  --color-neutral-900: 232 16% 10%;
  --color-neutral-950: 232 20% 6%;

  /* ── Primitive: 브랜드 인디고 ── */
  --color-brand-50:  238 100% 97%;
  --color-brand-100: 238 100% 94%;
  --color-brand-200: 239 100% 89%;
  --color-brand-300: 241 100% 82%;
  --color-brand-400: 243 96% 73%;
  --color-brand-500: 245 88% 64%;
  --color-brand-600: 246 76% 59%;
  --color-brand-700: 247 66% 50%;
  --color-brand-800: 248 62% 40%;
  --color-brand-900: 249 58% 28%;
  --color-brand-950: 246 50% 14%;

  /* ── Primitive: 상태색 ── */
  --color-green-50:  150 60% 95%;
  --color-green-400: 155 70% 40%;
  --color-green-600: 156 70% 28%;
  --color-green-900: 155 48% 14%;
  --color-red-50:    355 85% 96%;
  --color-red-400:   354 68% 55%;
  --color-red-600:   355 65% 48%;
  --color-red-900:   355 45% 18%;
  --color-yellow-50: 44 100% 93%;
  --color-yellow-400:40 90% 60%;
  --color-yellow-500:40 96% 50%;
  --color-yellow-900:36 100% 30%;

  /* ── Primitive: 카테고리 (러닝패스 구분) ── */
  --cat-coral:    14 100% 70%;
  --cat-skyblue:  200 81% 54%;
  --cat-olive:    81 82% 33%;
  --cat-purple:   259 87% 66%;
  --cat-mint:     182 100% 40%;
  --cat-magenta:  323 84% 60%;
  --cat-teal:     175 84% 32%;
  --cat-burgundy: 340 56% 54%;

  /* ── Semantic: 표면 ── */
  --bg:        #ffffff;
  --bg-elev:   #f7f7fa;
  --surface:   #ffffff;
  --surface-2: #f1f1f5;
  --surface-3: #e8e8ef;
  --overlay:   rgba(20, 22, 34, .48);

  /* ── Semantic: 선 ── */
  --border:       #e5e5ec;
  --border-2:     #cfcfda;
  --border-input: #8f8f9f;   /* 입력칸 경계는 3:1 이 필요하다(1.4.11) → 흰 바탕 위 3.18:1 */

  /* ── Semantic: 글자 ── */
  --text:   #16161d;
  --dim:    #4f4f5c;   /* 8.06:1 */
  --dimmer: #6c6c7a;   /* 5.17:1 — 본문 크기에 쓸 수 있는 가장 옅은 회색 */

  /* ── Semantic: 강조 ── */
  /* Claude 의 테라코타 계열. 원색(#d97757)은 흰 글자에 3.12:1 뿐이라 채움에
     쓸 수 없어서, 같은 색조를 어둡게 눌러 대비를 맞췄다. 값 옆의 숫자는 실측이다. */
  --accent:       #a9481f;   /* 채움(버튼·링). 흰 글자 5.78:1 */
  --accent-hover: #8f3a1e;   /* 7.52:1 */
  --accent-text:  #a5432a;   /* 흰 바탕 위의 글자 6.11:1 */
  --accent-bg:    #fdf0e9;   /* 옅은 판 */
  --accent-fg:    #7c3416;   /* 옅은 판 위 글자 7.97:1 */
  --on-accent:    #ffffff;
  --accent-2:     var(--accent-hover); /* 옛 이름 */

  /* ── Semantic: 상태 ── */
  --ok:        #157a4f;
  --ok-bg:     #e6f7ef;
  --ok-fill:   #1f9d64;
  --warn:      #9a5b00;
  --warn-bg:   #fff4dc;
  --warn-fill: #f2b23c;
  --err:       #c92a36;
  --err-bg:    #fdecee;
  --err-fill:  #d2323e;
  --pro:       #f4b942;
  --pro-fg:    #5a3b00;

  /* ── Semantic: 터미널·코드 (테마와 무관하게 어둡다) ── */
  --term-bg:  #0f1420;
  --term-fg:  #dde5f2;
  --term-dim: #8d9ab5;
  --code-bg:  var(--surface-2);

  /* 커버 아트는 라이트에서도 어둡다. 로고 수십 개가 저마다 색이라, 어두운 판
     하나로 통일해야 카탈로그가 한 제품처럼 보인다. */
  --artBg:   #141824;
  --artChip: rgba(255, 255, 255, .95);

  /* ── 그림자 — 떠 있는 것(메뉴·모달·토스트)에만 ── */
  --shadow-xs: 0 1px 2px rgba(16, 18, 32, .06);
  --shadow-sm: 0 1px 3px rgba(16, 18, 32, .08), 0 1px 2px rgba(16, 18, 32, .04);
  --shadow:    0 4px 14px -4px rgba(16, 18, 32, .12), 0 1px 3px rgba(16, 18, 32, .06);
  --shadow-lg: 0 18px 44px -12px rgba(16, 18, 32, .22), 0 2px 8px rgba(16, 18, 32, .06);

  /* 포커스 링 — 한 군데서 정한다(2.4.7) */
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  /* ── 옛 이름 (style.css 와 커뮤니티·도구 화면이 쓰던 별칭) ── */
  --card:       var(--surface);
  --card-2:     var(--surface-2);
  --panel2:     var(--surface-2);
  --fg:         var(--text);
  --muted:      var(--dimmer);
  --line:       var(--border);
  --brand:      var(--accent-text);
  --brand-soft: var(--accent-bg);
}

/* ── 다크 ──
   바닥은 거의 검정, 카드는 한 단 밝게. 표면 세 단계가 서로 구분되도록 명도를 한 단씩 띄웠고,
   글자는 순백 대신 살짝 눌러 눈부심을 줄였다.
   2026-09-24: 남색기를 덜었다(#0d0e14 → #0b0b0e). 카탈로그 참고안(KodeKloud)의 톤에 맞췄고,
   바닥이 어두워진 만큼 글자 대비는 올라간다 — 아래 숫자는 새 카드(--surface) 기준 실측이다. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0b0b0e;
  --bg-elev:   #111116;
  --surface:   #16171d;
  --surface-2: #1e1f27;
  --surface-3: #282a34;
  --overlay:   rgba(4, 5, 10, .64);

  --border:       #262832;
  --border-2:     #363946;
  --border-input: #6b7088;   /* 카드 위 3.66:1 */

  --text:   #eceef5;
  --dim:    #b3b7c7;   /* 8.95:1 */
  --dimmer: #8b90a5;   /* 5.65:1 */

  /* 아래 대비비는 이 테마에서 글자가 실제로 앉는 자리, 곧 카드(--surface)
     기준이다. 바닥(--bg)은 카드보다 어두우니 여기 적힌 것보다 높게 나온다. */
  --accent:       #c2410c;   /* 흰 글자 5.18:1 */
  --accent-hover: #d4552a;
  --accent-text:  #e08a63;   /* 카드 위 6.80:1 */
  --accent-bg:    #3a2018;
  --accent-fg:    #f0a882;   /* 옅은 판 위 7.59:1 */
  --on-accent:    #ffffff;

  --ok:        #4ccb8a;
  --ok-bg:     #123324;
  --ok-fill:   #24a86a;
  --warn:      #f3c15b;
  --warn-bg:   #3a2a08;
  --warn-fill: #e0a634;
  --err:       #ff7b85;
  --err-bg:    #43181d;
  --err-fill:  #d8414c;
  --pro:       #f4b942;
  --pro-fg:    #3d2800;

  --artBg:   #0c0f18;
  --artChip: rgba(255, 255, 255, .92);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow:    0 4px 14px -4px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
}

/* 시스템이 다크이고 페이지가 아직 테마를 고르지 않았을 때(정적 페이지·첫 페인트).
   값은 위 블록과 같다 — 선택자만 다르다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0b0b0e; --bg-elev: #111116; --surface: #16171d; --surface-2: #1e1f27;
    --surface-3: #282a34; --overlay: rgba(4, 5, 10, .64);
    --border: #262832; --border-2: #363946; --border-input: #6b7088;
    --text: #eceef5; --dim: #b3b7c7; --dimmer: #8b90a5;
    --accent: #c2410c; --accent-hover: #d4552a; --accent-text: #e08a63;
    --accent-bg: #3a2018; --accent-fg: #f0a882; --on-accent: #ffffff;
    --ok: #4ccb8a; --ok-bg: #123324; --ok-fill: #24a86a;
    --warn: #f3c15b; --warn-bg: #3a2a08; --warn-fill: #e0a634;
    --err: #ff7b85; --err-bg: #43181d; --err-fill: #d8414c;
    --pro: #f4b942; --pro-fg: #3d2800;
    --artBg: #0c0f18; --artChip: rgba(255, 255, 255, .92);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --shadow: 0 4px 14px -4px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
  }
}

/* 움직임을 줄이라고 한 사람에게는 전환을 사실상 끈다. 각 화면의 애니메이션도
   이 변수를 쓰므로 한 줄로 전부 꺼진다. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t: 1ms; --t-slow: 1ms; }
}