/* ======================================
   APP-LIKE BEHAVIOR
====================================== */
:root {
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-top: env(safe-area-inset-top);
}


html, body {
  overscroll-behavior: none;
  touch-action: manipulation;
  height: 100%;
}

/* Prevent accidental text selection */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Allow selection where needed */
input,
textarea {
  user-select: text;
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ROOT VARIABLES */
:root {
  --bg: #f6f3ee;
  --text-primary: #2b2b2b;
  --text-muted: #6f6a63;
  --accent-earth: #8a7f6d;

  --portal-center: 240,235,220;
  --portal-inner: 245,242,234;
  --portal-mid: 244,240,230;
  --portal-outer: 243,239,228;
  --portal-edge: 242,237,226;
}

/* BODY */
body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
}


/* =========================
   SACRED BUTTON BASE
========================= */
button {
  appearance: none;
  border: none;
  cursor: pointer;

  font-family: Inter, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  padding: 0.9rem 1.4rem;
  border-radius: 999px;

  background: rgba(138,127,109,0.85);
  color: #fff;

  box-shadow:
    0 8px 22px rgba(0,0,0,0.18),
    inset 0 0 0 rgba(255,255,255,0);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease,
    opacity 0.35s ease;
}

button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.22),
    inset 0 0 12px rgba(255,255,255,0.25);
}

button:active:not(:disabled) {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* SHARED ANIMATIONS */
@keyframes portalPulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.01); }
  100% { filter: brightness(1); }
}

@keyframes whisperPulse {
  0%,100% { opacity: 0.35; }
  50% { opacity: 0.65; }
}
