/* ============================================================
   BASE — CSS custom properties, reset, global utilities
   ============================================================ */

:root {
  --bg-color: #fde8bd;
  --surface-color: #e8dfd7;
  --text-color: #3d3d3d;
  --primary-color: #7a9d76;
  --secondary-color: #8b6f47;
  --on-primary-color: #0f1724;
  --border-color: rgba(139, 111, 71, 0.24);
  --soft-border-color: rgba(139, 149, 167, 0.2);
  --input-bg-color: rgba(139, 149, 167, 0.1);
  --accent-soft-color: rgba(122, 157, 118, 0.16);
  --accent-strong-color: rgba(122, 157, 118, 0.3);
  --focus-bg-color: rgba(122, 157, 118, 0.12);
  --shadow-color: rgba(61, 61, 61, 0.18);
  --chart-1: #7a9d76;
  --chart-2: #EC4899;
  --chart-3: #F7DC6F;
  --chart-4: #FF8E72;
  --chart-5: #95A5A6;
  --wave-end-color: #EC4899;
  --calendar-highlight-bg: linear-gradient(135deg, rgba(122, 157, 118, 0.55), rgba(236, 72, 153, 0.3));
  --calendar-highlight-shadow: rgba(122, 157, 118, 0.3);
}

html[data-visual-style="yang"] {
  --bg-color: #101722;
  --surface-color: #1b2431;
  --text-color: #edf3f8;
  --primary-color: #2f8cff;
  --secondary-color: #9aa8b7;
  --on-primary-color: #f8fbff;
  --border-color: rgba(154, 168, 183, 0.28);
  --soft-border-color: rgba(154, 168, 183, 0.22);
  --input-bg-color: rgba(154, 168, 183, 0.12);
  --accent-soft-color: rgba(47, 140, 255, 0.18);
  --accent-strong-color: rgba(47, 140, 255, 0.34);
  --focus-bg-color: rgba(16, 185, 129, 0.12);
  --shadow-color: rgba(0, 0, 0, 0.38);
  --chart-1: #2f8cff;
  --chart-2: #10b981;
  --chart-3: #4c1d95;
  --chart-4: #5b6472;
  --chart-5: #c7d0db;
  --wave-end-color: #10b981;
  --calendar-highlight-bg: linear-gradient(135deg, rgba(47, 140, 255, 0.72), rgba(16, 185, 129, 0.44));
  --calendar-highlight-shadow: rgba(47, 140, 255, 0.28);
}

/* --- Reset & base --- */
html, body {
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* --- Utility classes --- */
.mono { font-family: 'JetBrains Mono', monospace; }

.hidden { display: none !important; }

.view { display: none; }
.view.active { display: flex; }

.btn-press:active { transform: scale(0.97); }

.grain-bg {
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--chart-2) 12%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, color-mix(in srgb, var(--chart-3) 10%, transparent) 0%, transparent 50%);
}

body.app-booting #app {
  opacity: 0;
  pointer-events: none;
}

/* --- Animations --- */
.fade-in { animation: fadeIn 0.4s ease-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-up { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pulse-ring {
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring {
  0%       { transform: scale(1);   opacity: 0.6; }
  80%, 100% { transform: scale(1.4); opacity: 0; }
}