/* 디자인 토큰 — 변수만 둔다. 기준: docs/design-system.md §2
 * 다크가 기본이고, 라이트는 아래 블록에서 같은 이름만 다시 정의한다.
 * 강조색은 로고(favicon.svg)의 초록 #4CAF50 → #2E7D32 에서 왔다. */
:root {
  color-scheme: dark;

  /* 표면 */
  --c-bg: #0C0F0D;
  --c-surface: #151A17;
  --c-raised: #1C221E;
  --c-input: #101411;
  --c-line: #222925;
  --c-border: #2A322D;

  /* 글자 */
  --c-text: #F1F4F2;
  --c-text-2: #B3BDB7;
  --c-text-3: #8A948E;
  --c-faint: #5E6862;

  /* 브랜드(로고 초록) */
  --c-brand: #4CAF50;
  --c-brand-strong: #2E7D32;
  --c-brand-hover: #27692B;
  --c-brand-text: #8FD694;
  --c-brand-soft: rgba(76, 175, 80, 0.14);
  --c-brand-ring: rgba(76, 175, 80, 0.4);
  --c-hero-from: #2E7D32;
  --c-hero-to: #1B5E20;
  --c-on-brand: #FFFFFF;
  --c-on-brand-soft: rgba(0, 0, 0, 0.22);

  /* 돈의 방향 */
  --c-in: #8EC3FF;
  --c-in-soft: #16243A;
  --c-out: #FFB08A;
  --c-out-soft: #3A2A1E;
  --c-left: #8FD694;
  --c-left-soft: #1E3A22;
  --c-pending: #F0C36A;
  --c-pending-soft: #2E2614;
  --c-danger: #FF8A80;
  --c-danger-soft: rgba(255, 138, 128, 0.12);

  /* 구성 막대 칸 — 이웃 칸끼리 밝기가 다르게 */
  --split-fixed: #FF9466;
  --split-card: #C8653F;
  --split-saving: #6E7A73;
  --split-temp: #E0A93B;
  --split-left: #4CAF50;
  --split-track: #1D2320;

  /* 앱 틀 */
  --side-bg: #111512;
  --side-line: #1F2622;
  --side-active: #1D2320;
  --c-overlay: rgba(4, 6, 5, 0.7);

  /* 그림자 */
  --shadow-card: 0 0 0 0 transparent;
  --shadow-pop: 0 2.4rem 6rem rgba(0, 0, 0, 0.55);
  --shadow-hero: 0 1.6rem 4rem rgba(27, 94, 32, 0.35);

  /* 글꼴 · 크기 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fs-xs: 1.2rem;
  --fs-sm: 1.3rem;
  --fs-base: 1.5rem;
  --fs-md: 1.7rem;
  --fs-lg: 2rem;
  --fs-xl: 2.8rem;
  --fs-hero: 5.6rem;

  /* 간격 · 반경 */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2rem;
  --sp-6: 2.4rem;
  --sp-8: 3.2rem;
  --sp-10: 4rem;
  --r-sm: 0.8rem;
  --r-md: 1.2rem;
  --r-lg: 1.8rem;
  --r-xl: 2.4rem;
  --r-pill: 999px;

  --t-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  --side-w: 24rem;
  --tabbar-h: 6.4rem;
}

:root[data-theme="light"] {
  color-scheme: light;

  --c-bg: #F3F6F3;
  --c-surface: #FFFFFF;
  --c-raised: #F2F5F2;
  --c-input: #F7F9F7;
  --c-line: #E6EBE7;
  --c-border: #D6DDD8;

  --c-text: #161A17;
  --c-text-2: #47504A;
  --c-text-3: #5F6963;
  --c-faint: #A3ACA6;

  --c-brand-text: #2E7D32;
  --c-brand-soft: rgba(46, 125, 50, 0.1);
  --c-brand-ring: rgba(46, 125, 50, 0.3);

  --c-in: #1D5BB5;
  --c-in-soft: #E6EEFA;
  --c-out: #B4471F;
  --c-out-soft: #FBEBE3;
  --c-left: #2E7D32;
  --c-left-soft: #E5F2E6;
  --c-pending: #8A6100;
  --c-pending-soft: #FBF2DC;
  --c-danger: #C0322A;
  --c-danger-soft: #FDECEB;

  --split-fixed: #F08A5D;
  --split-card: #B4532A;
  --split-saving: #A3ACA6;
  --split-temp: #D9A030;
  --split-left: #4CAF50;
  --split-track: #E6EBE7;

  --side-bg: #FFFFFF;
  --side-line: #E6EBE7;
  --side-active: #E8F3E9;
  --c-overlay: rgba(22, 26, 23, 0.45);

  --shadow-card: 0 1px 2px rgba(22, 26, 23, 0.05);
  --shadow-pop: 0 2.4rem 6rem rgba(22, 26, 23, 0.18);
  --shadow-hero: 0 1.6rem 4rem rgba(46, 125, 50, 0.25);
}

@media (max-width: 760px) {
  :root { --fs-hero: 4.2rem; --fs-xl: 2.4rem; }
}