/* Pumua design tokens */
:root {
  /* Default palette — Sage warm */
  --bg: #F8F5F0;
  --surface: #EFEBE4;
  --surface-2: #E5E0D8;
  --primary: #7BAE8F;
  --primary-dark: #4A7C63;
  --accent: #A89BC2;
  --text: #2C2C2C;
  --text-muted: #8A8480;
  --text-faint: #B8B2AB;
  --therapy-tint: #D4937A;
  --meditation-tint: #8AAFCA;
  --danger: #C0544A;
  --admin-accent: #4A6FA5;

  --hairline: rgba(44, 44, 44, 0.08);
  --hairline-strong: rgba(44, 44, 44, 0.14);
  --shadow-soft: 0 1px 2px rgba(44, 44, 44, 0.04), 0 8px 24px rgba(44, 44, 44, 0.04);

  /* Density */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Type */
  --font-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;
}

/* Palette presets — toggled via [data-palette] */
[data-palette="ocean"] {
  --bg: #F4F6F4;
  --surface: #E9EEEC;
  --surface-2: #DDE5E2;
  --primary: #6FA1A8;
  --primary-dark: #3F6E76;
  --accent: #B6A8C4;
  --therapy-tint: #C99481;
  --meditation-tint: #7AA6BD;
}
[data-palette="dawn"] {
  --bg: #F8F1EA;
  --surface: #EFE3D5;
  --surface-2: #E5D4C0;
  --primary: #C99072;
  --primary-dark: #8B5A3F;
  --accent: #A899C2;
  --therapy-tint: #D4937A;
  --meditation-tint: #8AAFCA;
}
[data-palette="dusk"] {
  --bg: #F0EFF1;
  --surface: #E5E3E8;
  --surface-2: #D9D6DD;
  --primary: #8B7FA5;
  --primary-dark: #5C4F7C;
  --accent: #B89D8A;
  --therapy-tint: #C99481;
  --meditation-tint: #8597C2;
}

/* Dark mode (mobile only) */
[data-dark="true"] {
  --bg: #1C1B19;
  --surface: #26241F;
  --surface-2: #322F28;
  --text: #ECE7DD;
  --text-muted: #8F8A82;
  --text-faint: #5A554E;
  --primary: #94C2A6;
  --primary-dark: #6FA88B;
  --accent: #B8ABCF;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
}

/* Density */
[data-density="cozy"] { --gap: 14px; --pad: 18px; --row-h: 56px; }
[data-density="regular"] { --gap: 18px; --pad: 22px; --row-h: 60px; }
[data-density="airy"] { --gap: 26px; --pad: 28px; --row-h: 68px; }

/* Type pairings */
[data-typepair="default"] {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}
[data-typepair="literary"] {
  --font-display: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
}
[data-typepair="modern"] {
  --font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* utility */
.serif { font-family: var(--font-display); font-weight: 400; }
.mono { font-family: var(--font-mono); }

/* breathing pulse used across the app */
@keyframes pumuaBreathe {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.18); opacity: 0.85; }
}
@keyframes pumuaPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes pumuaFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pumuaShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.fade-up { animation: pumuaFadeUp 350ms ease-out both; }