/* ==========================================================================
   1번 디자인: 모던 벤토 그리드 & 소프트 젠 (Modern Bento Grid & Soft Zen)
   ========================================================================== */
:root {
  /* Surface & Backgrounds */
  --bg-app: #F7F5F0;          /* 따뜻한 일본 화지 아이보리 톤 */
  --bg-card: #FFFFFF;         /* 순백색 카드 */
  --bg-subtle: #EFECE6;       /* 부드러운 샌드 베이지 */
  --bg-input: #FFFFFF;
  --bg-glass: rgba(247, 245, 240, 0.92);

  /* Primary Brand (정갈한 말차 그린) */
  --primary: #4C7C54;         /* 말차 딥 그린 */
  --primary-hover: #3E6645;
  --primary-light: #EBF4ED;
  --primary-glow: rgba(76, 124, 84, 0.18);

  /* Accents */
  --accent-sakura: #FF6B8B;   /* 소프트 사쿠라 핑크 */
  --accent-sakura-light: #FFE4E8;
  --accent-matcha: #22C55E;   /* 산뜻한 말차 민트 */
  --accent-matcha-light: #DCFCE7;
  --accent-sky: #0EA5E9;      /* 스카이 블루 */
  --accent-sky-light: #E0F2FE;
  --accent-amber: #F59E0B;    /* 웜 앰버 옐로우 */
  --accent-amber-light: #FEF3C7;
  --accent-wisteria: #A855F7; /* 위스테리아 퍼플 */
  --accent-wisteria-light: #F3E8FF;

  /* Typography Colors */
  --text-main: #24292F;       /* 먹색 다크 챠콜 */
  --text-muted: #656D76;      /* 차분한 슬레이트 그레이 */
  --text-subtle: #9EA5AD;     /* 연한 그레이 */

  /* Borders & Shadows */
  --border-color: #E8E5DE;
  --border-hover: #D0CCC2;
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Soft Bento Clay Shadows */
  --shadow-sm: 0 2px 6px rgba(45, 40, 35, 0.03);
  --shadow-card: 0 4px 20px rgba(45, 40, 35, 0.04), 0 1px 3px rgba(45, 40, 35, 0.02);
  --shadow-hover: 0 10px 28px rgba(45, 40, 35, 0.08), 0 2px 6px rgba(45, 40, 35, 0.04);
  --shadow-bento: 0 8px 30px rgba(45, 40, 35, 0.06);

  /* Animation Timings */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Overrides */
[data-theme="dark"] {
  --bg-app: #18191E;
  --bg-card: #22242B;
  --bg-subtle: #2B2E37;
  --bg-input: #292B34;
  --bg-glass: rgba(24, 25, 30, 0.92);

  --text-main: #F3F4F6;
  --text-muted: #9CA3AF;
  --text-subtle: #6B7280;

  --border-color: #323642;
  --border-hover: #454B5C;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-bento: 0 8px 30px rgba(0, 0, 0, 0.35);

  --primary-light: rgba(76, 124, 84, 0.2);
  --accent-sakura-light: rgba(255, 107, 139, 0.18);
  --accent-matcha-light: rgba(34, 197, 94, 0.18);
  --accent-sky-light: rgba(14, 165, 233, 0.18);
  --accent-amber-light: rgba(245, 158, 11, 0.18);
  --accent-wisteria-light: rgba(168, 85, 247, 0.18);
}