/* ============================================================================
 * DESIGN: Zen / Focus
 *
 * Headspace / Calm / meditation-app mood.
 *
 * Background:  very soft gradient (drift-orb amplified)
 * Font:        Cormorant Garamond (display) + Inter (body)
 * Padding:     generous (60px+)
 * Corners:     22–28px (very round)
 * Color:       pale teal/sage on light, deep teal on dark
 * Motion:      fade-out (honors prefers-reduced-motion)
 * ============================================================================ */

html[data-design="zen"] {
  --radius: 22px;
  --radius-lg: 28px;
  --shadow: 0 6px 24px -12px rgba(0,80,80,0.10);
  --shadow-lg: 0 30px 80px -24px rgba(0,80,80,0.25);
  --serif: 'Cormorant Garamond', 'Gowun Batang', 'Times New Roman', serif;
  --sans:  'Inter', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
}

html[data-design="zen"][data-theme="light"] {
  --bg: #f3f8f5;
  --bg-tint: #eaf3ee;
  --surface: #fbfdfb;
  --surface-2: #eef5f0;
  --border: #d4e3da;
  --border-soft: #e4ede7;
  --ink: #1f2a25;
  --ink-soft: #3d4c45;
  --muted: #7a8a82;
}
html[data-design="zen"][data-theme="dark"] {
  --bg: #0d1714;
  --bg-tint: #102019;
  --surface: #142420;
  --surface-2: #1a2c26;
  --border: #2a4038;
  --border-soft: #1f3530;
  --ink: #e0eee7;
  --ink-soft: #b8ccc0;
  --muted: #7a9088;
}

html[data-design="zen"] body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
}
html[data-design="zen"] body::before { opacity: 0.15 !important; }
html[data-design="zen"] .drift-orb {
  opacity: 0.5 !important;
  filter: blur(110px) !important;
}

/* Cards: extremely rounded, very generous padding */
html[data-design="zen"] .day,
html[data-design="zen"] .today-card,
html[data-design="zen"] .palette-card,
html[data-design="zen"] .task-breakdown {
  border-radius: 22px !important;
  padding: 28px !important;
  box-shadow: 0 6px 28px -16px rgba(0,80,80,0.12) !important;
  border: 1px solid var(--border-soft) !important;
}
html[data-design="zen"] .modal {
  border-radius: 28px !important;
  padding: 40px !important;
}
html[data-design="zen"] .drawer {
  border-radius: 28px 0 0 28px !important;
}

/* Today view: hero treatment for first action */
html[data-design="zen"] .today-shell .today-card:first-of-type {
  padding: 60px 40px !important;
}
html[data-design="zen"] .today-shell .first-action,
html[data-design="zen"] .today-shell .first-action-text {
  font-family: var(--serif) !important;
  font-size: 2.2em !important;
  font-weight: 400 !important;
  line-height: 1.3;
  font-style: italic;
  color: var(--ink);
}

/* Day name: elegant serif */
html[data-design="zen"] .day-name {
  font-family: var(--serif) !important;
  font-size: 1.6em !important;
  font-weight: 400 !important;
  font-style: italic;
  letter-spacing: 0;
}

/* Task input: airy */
html[data-design="zen"] .task-input,
html[data-design="zen"] .add-task-input {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}

html[data-design="zen"] textarea,
html[data-design="zen"] input[type="text"] {
  border-radius: 14px !important;
}

/* Buttons: very round, soft */
html[data-design="zen"] button:not(.task-del):not(.weight-badge):not(.task-kr-dot) {
  border-radius: 18px !important;
  padding: 8px 18px !important;
  font-family: var(--sans) !important;
  font-weight: 500;
}

/* Section labels: gentle */
html[data-design="zen"] .section-label {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 13px !important;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* Task completion fade-out animation */
@keyframes zen-fade-strike {
  0%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.45; }
}
html[data-design="zen"] .task-input.done {
  animation: zen-fade-strike 1.2s ease-out forwards;
  opacity: 0.45;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html[data-design="zen"] .task-input.done {
    animation: none !important;
    opacity: 0.45;
  }
  html[data-design="zen"] .drift-orb {
    animation: none !important;
  }
}

/* Today page benefits most: extra generous spacing */
html[data-design="zen"] .view-section[data-view="today"] .today-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0;
}