/* ==========================================================================
   Beauté Fatale Spa — mobile-first web app
   Design tokens and metrics are ported 1:1 from the app prototype.
   ========================================================================== */

:root {
  --rose: #D98A98;
  --rose-deep: #B15C6E;
  --rose-soft: #F3DEE0;
  --gold: #B8935A;
  --gold-deep: #8F7038;
  --ink: #2A2120;
  --body: #5C5049;
  --muted: #9C8E88;
  --line: #EAE0DB;
  --bg: #FBF5F2;
  --card: #FFFFFF;
  --cream: #F7EAE4;
  --sage: #7C8B75;

  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* Scrollbars stay hidden — the prototype scrolls like a native app. */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; border-radius: 6px; }