/* brunch.heal7.com — Plan B 토큰 (라이트 기본 + 다크 오버라이드) */
:root {
  /* Brand — 진파랑 단일 테마 (copper 사용처는 토큰 alias로 자동 전환) */
  --brand-indigo:      #1F3A8A;
  --brand-indigo-soft: #2E50B5;
  --brand-indigo-deep: #16275E;
  --brand-copper:      #1F3A8A;       /* alias: 모든 보조색 사용처를 인디고로 흡수 */
  --brand-copper-soft: #2E50B5;
  --copper:            var(--brand-copper);

  /* Semantic — LIGHT (라이트 모드 = 순백색 배경, 글래스는 헤일로로 가시화) */
  --bg:              #FFFFFF;             /* 화이트 토글에서는 배경 = 순백 */
  --bg-elev:         #FFFFFF;
  --surface:         #FFFFFF;
  --surface-glass:   rgba(255,255,255,0.55);   /* 0.62 → 0.55 (blur 가시화) */
  --surface-glass-2: rgba(255,255,255,0.74);
  --ink:             #0A1530;             /* 본문 강화 — 안개 제거 */
  --ink-strong:      #050B1C;
  --ink-soft:        #25324C;             /* desc/lede에 mute 대신 사용 */
  --ink-mute:        #4A5874;             /* mute도 더 진하게 */
  --ink-faint:       #7585A2;
  --accent:          var(--brand-indigo);
  --accent-soft:     var(--brand-indigo-soft);  /* 동(銅) 제거, 인디고 soft로 통일 */
  --accent-on:       #FFFFFF;
  --line:            rgba(31,58,138,0.28);     /* 12% → 28% — 윤곽 또렷 */
  --line-strong:     rgba(31,58,138,0.45);     /* 22% → 45% */
  --ring:            rgba(31,58,138,0.45);

  --ok:              #1E7A5A;
  --warn:            #C9821F;
  --err:             #B6303F;

  /* Graph 전용 qualitative 팔레트 — 페이지 indigo unified와 별개로,
     차트 시리즈 구분이 한눈에 보이도록 다채로운 5색을 격리해 둔다.
     indigo brand를 anchor(c1)로 두어 단일 시리즈도 브랜드 톤 유지. */
  --graph-c1: #1F3A8A;   /* indigo — anchor / 단일 시리즈 기본 */
  --graph-c2: #E07A5F;   /* coral  — 따뜻한 대비 */
  --graph-c3: #2E7D6B;   /* teal   — 차분한 대비 */
  --graph-c4: #C9821F;   /* amber  — 강조·경고 */
  --graph-c5: #6B5B95;   /* violet — 깊이·여운 */
  /* G1(서·본·결 비중) — 글 흐름 의미 정렬형 3색 (새벽·정오·노을) */
  --graph-intro:      #E07A5F;   /* 서론: 도입의 따뜻함 */
  --graph-body:       #1F3A8A;   /* 본론: 중심의 안정 */
  --graph-conclusion: #2E7D6B;   /* 결론: 마무리의 차분 */

  /* Shadows — 부각 강화 */
  --shadow-glass:        0 10px 32px rgba(14,28,64,0.18), 0 1px 0 rgba(255,255,255,0.85) inset;
  --shadow-glass-strong: 0 22px 56px rgba(14,28,64,0.26), 0 1px 0 rgba(255,255,255,0.92) inset;
  --shadow-glow:         0 0 0 1.5px rgba(31,58,138,0.32), 0 10px 28px rgba(31,58,138,0.26);
  --shadow-card:         0 4px 12px rgba(14,28,64,0.12), 0 18px 40px rgba(14,28,64,0.16);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Spacing */
  --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: 56px;
  --space-16: 72px;

  /* Typography
     사이트 본연 서비스 영역은 Pretendard 단일 패밀리로 통일 (2026-05-11).
     --font-serif / --font-mono는 호환을 위해 alias로 유지 — 본문/UI 어디에서 호출하든
     동일한 sans 스택으로 귀결된다.
     작가 갤러리 게시물은 gallery.js가 element.style.fontFamily로 inline 적용하므로
     토큰 변경의 영향을 받지 않고 작가 지정 서체가 그대로 보존된다. */
  --font-sans:  "Pretendard Variable","Pretendard","Noto Sans KR",
                ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif: var(--font-sans);
  --font-mono:  var(--font-sans);

  --fz-9:  9px;  --fz-10: 10px; --fz-11: 11px;
  --fz-12: 12px; --fz-13: 13px; --fz-14: 14px; --fz-15: 15px;
  --fz-16: 16px; --fz-18: 18px; --fz-20: 20px; --fz-24: 24px;
  --fz-28: 28px; --fz-32: 32px; --fz-40: 40px; --fz-48: 48px; --fz-56: 56px;

  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-base:  1.6;
  --lh-loose: 1.85;

  /* Motion */
  --easing-standard: cubic-bezier(.2,.8,.2,1);
  --easing-emphasis: cubic-bezier(.25,1,.3,1);
  --easing-enter:    cubic-bezier(0,.0,.2,1);
  --easing-exit:     cubic-bezier(.4,0,1,1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 360ms;
  --dur-5: 520ms;

  /* Z */
  --z-nav: 50;
  --z-popover: 80;
  --z-modal: 100;
  --z-toast: 120;

  /* Container */
  --container: 1200px;
  --container-narrow: 880px;

  /* Breakpoints — JS matchMedia 참조용 (CSS @media 쿼리는 var() 미지원이라 인라인 값 사용) */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
}

:root[data-theme="dark"] {
  --bg:              #050912;
  --bg-elev:         #0A1226;
  --surface:         #0E1730;
  --surface-glass:   rgba(18,28,54,0.50);
  --surface-glass-2: rgba(22,34,64,0.70);
  --ink:             #F2F6FF;             /* 또렷한 흰 */
  --ink-strong:      #FFFFFF;
  --ink-soft:        #C9D5EE;
  --ink-mute:        #B0C2DF;             /* 9DB0CD → B0C2DF */
  --ink-faint:       #6E809E;
  --accent:          #8AB4F8;
  --accent-soft:     #5478D9;        /* 다크에서도 인디고 라이트 톤 */
  --accent-on:       #0A1226;
  --line:            rgba(180,200,235,0.32);   /* 14% → 32% */
  --line-strong:     rgba(180,200,235,0.55);   /* 28% → 55% */
  --ring:            rgba(138,180,248,0.55);

  --ok:   #6FD7AE;
  --warn: #F0B879;
  --err:  #F58591;

  /* Graph 전용 — 다크모드 대비 톤업한 qualitative 팔레트 */
  --graph-c1: #8AB4F8;   /* indigo light */
  --graph-c2: #F4A582;   /* coral light */
  --graph-c3: #6DC9AB;   /* teal light */
  --graph-c4: #F0B879;   /* amber light */
  --graph-c5: #B19BD9;   /* violet light */
  --graph-intro:      #F4A582;
  --graph-body:       #8AB4F8;
  --graph-conclusion: #6DC9AB;

  --shadow-glass:        0 10px 36px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(138,180,248,0.10) inset;
  --shadow-glass-strong: 0 24px 64px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.10) inset, 0 0 0 1px rgba(138,180,248,0.16) inset;
  --shadow-glow:         0 0 0 1.5px rgba(138,180,248,0.45), 0 12px 32px rgba(138,180,248,0.28);
  --shadow-card:         0 4px 12px rgba(0,0,0,0.5),   0 22px 48px rgba(0,0,0,0.65);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms;
  }
}