/* ============================================
   variables.css — Design System v1.0 (Claude tone)
   ============================================
   색·타이포·간격·라운드·그림자는 여기만 수정합니다.
   컴포넌트 CSS는 var(--토큰)만 참조합니다.

   HTML·manifest·icon.svg 동기화:
   · index.html  <meta name="theme-color">
   · manifest.json  theme_color, background_color
   · icons/icon.svg  fill
   ============================================ */

:root {
  color-scheme: light;

  /* ---------- 색상: 배경·표면 ---------- */
  --color-bg: #f5f1eb;
  --color-bg-elevated: #faf7f2;
  --color-bg-subtle: #ede7dd;

  /* ---------- 색상: 텍스트 ---------- */
  --color-text: #1f1e1b;
  --color-text-muted: #6b675f;
  --color-text-subtle: #9b9690;

  /* ---------- 색상: 경계 ---------- */
  --color-border: #e0d9cd;
  --color-border-subtle: #ece6da;
  --border-width: 1px;

  /* ---------- 색상: 액센트·상태 ---------- */
  --color-accent: #c96442;
  --color-accent-hover: #b8553a;
  --color-accent-pressed: #a84a32;
  --color-accent-bg: #fbeae3;
  /* 홈 D-7/D-30/30+ 헤더 닫힘: 아이콘·라벨 동일 회색 */
  --tasks-acc-muted: #888780;
  --tasks-acc-row-bg: #faf7f2;
  --tasks-acc-row-border: rgba(0, 0, 0, 0.06);
  --color-on-accent: #ffffff;
  --color-header-fg: #f5f1eb;
  --color-header-bg: #c96442;

  /* 오늘 할 일 카드 (브랜드 #C96442 · 라이트/다크 동일) */
  --color-today-bg: #c96442;
  --color-today-text: #ffffff;
  --color-today-text-muted: #f5e8e3;
  --color-today-border: color-mix(in srgb, #ffffff 32%, #c96442);

  --color-success: #5c8d3f;
  --color-warning: #d4a53a;
  --color-danger: #c44e3a;
  --color-info: #4a7299;

  --color-stock-up: #c44e3a;
  --color-stock-down: #4a7299;

  /* ---------- 색상: 의미·파생 ---------- */
  --color-danger-bg: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg));
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg));
  --color-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--color-bg));
  --color-deadline-none: var(--color-info);
  --color-deadline-none-bg: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
  --color-star: #f5a623;
  --color-star-empty: var(--color-border);
  --icon-star-size: 11px;
  --icon-star-gap: 0px;
  --color-neutral: var(--color-text-subtle);
  --color-completed: var(--color-text-muted);
  --color-overlay: rgba(31, 30, 27, 0.42);
  --profile-bg-overlay: rgba(245, 241, 235, 0.88);
  --profile-bg-image: none;

  --color-calendar-sunday: var(--color-danger);
  --color-calendar-saturday: var(--color-info);

  /* ---------- 레이아웃 · 반응형 ---------- */
  --app-max-width: 480px;
  --app-max-width-tablet: 600px;
  --bp-mobile-max: 480px;
  --bp-tablet-min: 481px;
  --bp-tablet-lg-min: 769px;
  --bp-desktop-min: 1025px;
  /* 480px 초과 시 양옆 여백 (앱 bg보다 살짝 어두운 톤) */
  --color-bg-frame: color-mix(in srgb, var(--color-bg) 88%, var(--color-text) 12%);
  --header-height: 52px;
  --tab-bar-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  --z-header: 20;
  --z-tab-bar: 30;
  --z-overlay: 40;
  --z-modal: 50;

  --touch-target-min: 44px;
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;

  --list-item-pad-y: 14px;
  --list-item-pad-x: 16px;

  /* ---------- 간격 (8px 기준) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --gap-tab-item: 2px;

  /* ---------- 라운드 ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---------- 그림자 ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-fab: 0 4px 16px rgba(201, 100, 66, 0.25);

  /* ---------- 타이포 ---------- */
  --font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --text-xs: 12px;
  --text-13: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-greeting: 30px;
  --text-dday: 15px;
  --text-list-title: 15px;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --line-height-tight: 1;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;
  --letter-spacing-tight: -0.02em;

  /* ---------- 전환 ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  --opacity-pressed: 0.88;
  --hover-dim: brightness(0.96);
}

[data-theme="light"] {
  --color-header-bg: #c96442;
}

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

  --color-bg: #1f1d1a;
  --color-bg-elevated: #2a2823;
  --color-bg-subtle: #34312b;

  --color-text: #e8e4dc;
  --color-text-muted: #a09b91;
  --color-text-subtle: #6b675f;

  --color-border: #3f3b33;
  --color-border-subtle: #2f2c26;

  --color-accent: #e07654;
  --color-accent-hover: #d06a47;
  --color-accent-pressed: #c46248;
  --color-accent-bg: #3f2a22;
  --tasks-acc-muted: #a09b91;
  --tasks-acc-row-bg: #2a2823;
  --tasks-acc-row-border: rgba(255, 255, 255, 0.06);
  --color-on-accent: #ffffff;
  --color-header-fg: #f5f1eb;
  --color-header-bg: #b8553a;

  --color-today-bg: #c96442;
  --color-today-text: #ffffff;
  --color-today-text-muted: #f5e8e3;
  --color-today-border: color-mix(in srgb, #ffffff 32%, #c96442);

  --color-success: #7ba85a;
  --color-warning: #e5bc54;
  --color-danger: #d86852;
  --color-info: #6e96bf;

  --color-stock-up: #d86852;
  --color-stock-down: #6e96bf;

  --color-danger-bg: color-mix(in srgb, var(--color-danger) 18%, var(--color-bg));
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg));
  --color-success-bg: color-mix(in srgb, var(--color-success) 14%, var(--color-bg));
  --color-deadline-none-bg: color-mix(in srgb, var(--color-info) 14%, var(--color-bg));
  --color-star: #ffb838;

  --color-overlay: rgba(0, 0, 0, 0.58);
  --profile-bg-overlay: rgba(31, 29, 26, 0.82);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-fab: 0 4px 16px rgba(224, 118, 84, 0.35);

  --color-bg-frame: color-mix(in srgb, var(--color-bg) 82%, #000 18%);
}