/* 디자인 토큰.
 *
 * ★값의 출처는 `packages/tsc-ui-tokens` 다. 홍보 사이트가 제품과 다른 색을 쓰면
 *   화면을 처음 본 순간 «다른 물건»으로 읽힌다.
 *   - 기본(`:root`)      = station-dark
 *   - `.theme-light` 장  = station-light (제품에도 실제로 있는 테마다. 사무실 창가
 *                          반사 때문에 «필수» 로 둔 그 테마를 그대로 가져온다)
 *
 * ★장(章)마다 어둡고 밝은 바탕을 번갈아 쓴다. 긴 한 장짜리 페이지에서 «여기서
 *   이야기가 바뀐다» 를 말하는 것은 구분선이 아니라 바탕색이다. 어느 장이 밝은지는
 *   `templates/index.html` 의 주석에 있다.
 *
 * ★상태색(안정/불안정/경고/단절)은 제품에서 **변경 금지** 항목이다. 밝은 장에서는
 *   제품과 똑같이 «같은 계열의 진한 변형»(`state-text-*`)으로 바꿔 쓴다 —
 *   #34D399 는 흰 바탕에서 대비 1.9 라 전혀 읽히지 않는다.
 */

:root {
  color-scheme: dark;

  /* ── 바탕 ── */
  --bg-base:        #040A10;
  --bg-deep:        #02060A;
  --bg-surface:     rgba(34, 211, 238, 0.05);
  --bg-elevated:    rgba(34, 211, 238, 0.10);
  --bg-panel:       #071E26;
  --bg-panel-alt:   #0A2C38;
  --bg-tile:        #07141B;   /* 타일 바탕. 반투명 surface 를 base 위에 눌러 앉힌 값 */

  /* ── 강조 ── */
  --accent:         #22D3EE;
  --accent-deep:    #0E9BB8;
  --accent-soft:    rgba(34, 211, 238, 0.14);
  --accent-line:    rgba(34, 211, 238, 0.28);
  --accent-glow:    0 0 80px rgba(34, 211, 238, 0.35);
  --accent-alt:     #8B5CF6;   /* 관제 테마 보조색 */
  --amber:          #F5B942;   /* 브랜드 보조. ★상태 표현에 절대 쓰지 않는다 */
  --on-accent:      #032029;   /* 강조색 위에 올리는 글자 */

  /* ── 글자 ── */
  --text:           #E6F7FC;
  --text-strong:    #FFFFFF;
  --text-muted:     #7FA8B8;
  --text-faint:     #4E7383;

  /* ── 선 ── */
  --line:           rgba(34, 211, 238, 0.16);
  --line-strong:    rgba(34, 211, 238, 0.42);
  --line-soft:      rgba(255, 255, 255, 0.07);

  /* ── 상태색 (제품과 동일. 변경 금지) ── */
  --state-stable:   #34D399;
  --state-unstable: #F87171;
  --state-offline:  #EF4444;
  --state-warn:     #FBBF24;
  --state-idle:     #6B7280;

  /* ── 중량 표시 ── */
  --weight-bg:      #00070D;
  --weight-fg:      #A5F3FC;

  /* ── 큰 숫자 ── 스탯 콜아웃의 그라데이션. 전부 제품 토큰(weight-fg → accent → accent-alt) */
  --num-gradient:   linear-gradient(100deg, #A5F3FC 0%, #22D3EE 45%, #8B5CF6 100%);

  /* ── 그림자 ── */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:      0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-lg:      0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(34, 211, 238, 0.08);
  --shadow-hero:    0 40px 120px rgba(0, 0, 0, 0.7), 0 0 120px rgba(34, 211, 238, 0.12);

  /* ── 형태 ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ── 간격 (8px 배수. 섹션만 별도) ── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section-y: clamp(96px, 11vw, 168px);

  /* ── 글꼴 ──
   * 숫자는 반드시 고정폭(tabular-nums)이다. 계량 숫자가 흔들리면 오독이 난다는
   * 제품의 원칙을 홍보 사이트에서도 지킨다. */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", "Menlo", "Consolas",
              "Pretendard Variable", monospace;

  /* ── 레이아웃 ── */
  --wrap: 1200px;
  --wrap-wide: 1400px;
  --wrap-narrow: 820px;
  --wrap-text: 720px;
  --nav-h: 52px;

  /* ── 움직임 ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
}

/* ══ 밝은 장 ══
 * 제품 station-light 테마 값 그대로 (`tsc_ui_tokens/tokens.py` STATION_LIGHT).
 * 컴포넌트는 전부 토큰만 보므로, 이 블록 하나로 어느 조각이든 밝은 장에 들어간다. */
.theme-light {
  color-scheme: light;

  --bg-base:        #F7FAFB;
  --bg-deep:        #FFFFFF;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #EDF3F5;
  --bg-panel:       #E6EDF0;
  --bg-panel-alt:   #E1EAEE;
  --bg-tile:        #FFFFFF;

  --accent:         #0E7490;
  --accent-deep:    #0B5F73;
  --accent-soft:    rgba(14, 116, 144, 0.10);
  --accent-line:    rgba(14, 116, 144, 0.28);
  --accent-glow:    none;
  --accent-alt:     #6D28D9;   /* 흰 바탕용 진한 변형 (#8B5CF6 는 대비 3.3) */
  --amber:          #B45309;   /* 흰 바탕용 진한 변형 */
  --on-accent:      #FFFFFF;

  --text:           #0F1A1F;
  --text-strong:    #000000;
  --text-muted:     #566A72;
  --text-faint:     #62757D;

  --line:           rgba(11, 95, 115, 0.16);
  --line-strong:    rgba(11, 95, 115, 0.42);
  --line-soft:      rgba(15, 26, 31, 0.08);

  /* 상태색 — 제품 라이트 테마의 `state-text-*` 변형 */
  --state-stable:   #065F46;
  --state-unstable: #991B1B;
  --state-offline:  #B91C1C;
  --state-warn:     #B45309;
  --state-idle:     #6B7280;

  --weight-bg:      #FFFFFF;
  --weight-fg:      #000000;

  --num-gradient:   linear-gradient(100deg, #0B5F73 0%, #0E7490 45%, #6D28D9 100%);

  --shadow-sm:      0 1px 2px rgba(15, 26, 31, 0.10);
  --shadow-md:      0 14px 40px rgba(15, 26, 31, 0.10);
  --shadow-lg:      0 24px 64px rgba(15, 26, 31, 0.14);
  --shadow-hero:    0 32px 90px rgba(15, 26, 31, 0.18);
}

/* 저사양·모션 민감 사용자 배려. 제품의 `prefers-reduced-motion` 원칙과 같다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}