/* HeartSpace Design System - "The Tactile Sanctuary" */

:root {
  --color-primary: #521d1b;
  --color-primary-container: #6e332f;
  --color-on-primary: #ffffff;
  --color-secondary: #695d41;
  --color-secondary-container: #f2e1bd;
  --color-surface: #fefae6;
  --color-surface-container-low: #f8f4e1;
  --color-surface-container: #f2eedb;
  --color-surface-container-high: #ece8d6;
  --color-surface-container-highest: #e7e3d0;
  --color-surface-container-lowest: #ffffff;
  --color-surface-dim: #dedac8;
  --color-tertiary: #561a0d;
  --color-tertiary-container: #733021;
  --color-surface-tint: #8d4c47;
  --color-on-surface: #1d1c11;
  --color-on-surface-variant: #534341;
  --color-outline: #857371;
  --color-outline-variant: #d8c1bf;
  --color-error: #ba1a1a;
  --font-headline: 'Noto Serif', serif;
  --font-body: 'Manrope', sans-serif;

  /* Motion system - sanctuary-paced */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-sanctuary: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-duration: 500ms;
  --transition-easing: var(--ease-sanctuary);
}

/* Base - Native mobile feel */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  touch-action: manipulation;
  overscroll-behavior: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar utility */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* Editorial shadow - multi-layered for depth */
.editorial-shadow {
  box-shadow:
    0 1px 2px rgba(29, 28, 17, 0.03),
    0 4px 8px rgba(29, 28, 17, 0.03),
    0 8px 32px rgba(29, 28, 17, 0.05);
}

/* Glassmorphism */
.glassmorphism {
  background: rgba(254, 250, 230, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Glass effect (used in community screens) */
.glass-effect {
  background: rgba(254, 250, 230, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Organic gradient background */
.organic-gradient-bg {
  background: radial-gradient(circle at 50% 50%, #fefae6 0%, #f8f4e1 100%);
}

/* Glow radial for confirmation screen */
.bg-glow-radial {
  background: radial-gradient(circle at 50% 30%, rgba(242, 225, 189, 0.4) 0%, transparent 60%);
}

/* Asymmetric shape decorations */
.asymmetric-shape {
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
}

/* ===== SCREEN TRANSITION SYSTEM ===== */
#screen-container {
  transition: opacity var(--transition-duration) var(--ease-sanctuary),
              transform var(--transition-duration) var(--ease-sanctuary);
}

#screen-container.slide-out-left {
  opacity: 0;
  transform: translateX(-60px);
}
#screen-container.slide-out-right {
  opacity: 0;
  transform: translateX(60px);
}
#screen-container.slide-in-right {
  animation: slideInRight var(--transition-duration) var(--ease-decelerate) forwards;
}
#screen-container.slide-in-left {
  animation: slideInLeft var(--transition-duration) var(--ease-decelerate) forwards;
}
#screen-container.fade-out {
  opacity: 0;
  transition: opacity 300ms var(--ease-accelerate);
}
#screen-container.fade-in {
  animation: fadeIn 400ms var(--ease-decelerate) forwards;
}
#screen-container.slide-up-in {
  animation: slideUpIn var(--transition-duration) var(--ease-decelerate) forwards;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== STAGGER ANIMATIONS FOR CARDS ===== */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  animation: fadeSlideUp 0.5s var(--ease-sanctuary) both;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
.stagger-item:nth-child(4) { animation-delay: 180ms; }
.stagger-item:nth-child(5) { animation-delay: 240ms; }
.stagger-item:nth-child(6) { animation-delay: 300ms; }

/* ===== BREATHING ANIMATION - Daily Ritual ===== */
@keyframes breatheGlow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.15); opacity: 0.6; }
}
.breathe-glow {
  animation: breatheGlow 4s var(--ease-sanctuary) infinite;
}

/* Pulse for notification badge */
@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== FOCUS STATES (Accessibility) ===== */
/* Global focus-visible ring for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[data-navigate]:focus-visible,
[data-back]:focus-visible,
[data-filter]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Remove default outline for mouse clicks */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[data-navigate]:focus:not(:focus-visible) {
  outline: none;
}

/* Active state for bottom nav tabs */
.nav-tab {
  min-height: 48px;
  min-width: 48px;
  padding: 6px 12px;
  transition: all 0.3s var(--ease-sanctuary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.nav-tab:active {
  transform: scale(0.92);
}

/* ===== DESKTOP WRAPPER ===== */
.desktop-wrapper {
  background: linear-gradient(135deg, #f8f4e1 0%, #e7e3d0 50%, #f2eedb 100%);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2rem;
}

/* ===== PHONE FRAME ===== */
.phone-frame {
  width: 390px;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fefae6;
  box-shadow:
    0 4px 16px rgba(82, 29, 27, 0.08),
    0 25px 80px rgba(82, 29, 27, 0.15);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* NOTE: no transform here - bottom nav is outside the frame and needs viewport-fixed */
}
.phone-frame::-webkit-scrollbar {
  display: none;
}

/* Real mobile devices: edge-to-edge, no frame */
@media (max-width: 499px) {
  .desktop-wrapper {
    padding: 0;
    background: #fefae6;
  }
  .phone-frame {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Desktop: centered phone mockup */
@media (min-width: 500px) {
  .phone-frame {
    min-height: 844px;
    max-height: 90vh;
    border-radius: 2.5rem;
  }
  .desktop-wrapper {
    padding: 2rem 0;
    align-items: center;
  }
}

/* Safe area insets for notched devices (iPhone X+, Dynamic Island) */
@supports (padding: env(safe-area-inset-top)) {
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ===== BOTTOM NAVIGATION ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(254, 250, 230, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(216, 193, 191, 0.12);
  transition: transform 0.3s var(--ease-sanctuary);
}

/* On desktop, constrain bottom nav to phone frame width */
@media (min-width: 500px) {
  .bottom-nav {
    width: 390px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 0 0 2.5rem 2.5rem;
  }
}

/* Constrain fixed FABs inside screen content to phone frame width */
#screen-container .fixed {
  max-width: 390px;
}
@media (max-width: 499px) {
  #screen-container .fixed {
    max-width: 100vw;
  }
}
/* On desktop, offset FABs to sit within the phone frame */
@media (min-width: 500px) {
  #screen-container .fixed[class*="right-"] {
    right: calc(50% - 195px + 24px) !important;
    left: auto !important;
  }
  #screen-container .fixed[class*="left-1/2"] {
    left: 50% !important;
    max-width: 390px;
  }
}

/* ===== IMAGE FALLBACK ===== */
img {
  max-width: 100%;
  height: auto;
}
img.error,
img[src=""],
img:not([src]) {
  background: #f2eedb;
  min-height: 60px;
}

/* ===== SKIP NAVIGATION (Accessibility) ===== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 1rem 1rem;
  z-index: 9999;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-decelerate);
}
.skip-link:focus {
  top: 0;
}

/* ===== REDUCED MOTION (Accessibility) ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .breathe-glow {
    animation: none;
  }
  .stagger-item {
    animation: none;
    opacity: 1;
  }
  #screen-container {
    transition: none;
  }
}

/* ===== SIDE MENU DRAWER ===== */
@keyframes slideMenuIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slideMenuOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ===== HOVER GUARD FOR TOUCH DEVICES ===== */
@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29, 28, 17, 0.08);
  }
}