/* ============================================================
   BLOOM & YOU — base: tokens, reset, typography
   ============================================================ */

:root {
  /* --- brand palette --- */
  --ivory:        #faf6f0;
  --ivory-deep:   #f4ece2;
  --cream:        #f1e7db;
  --blush:        #f7dde2;
  --soft-pink:    #eec2cc;
  --dusty-rose:   #c98b9b;
  --rose-deep:    #a86376;
  --muted-green:  #8fa68e;
  --sage:         #b7c4a8;
  --sage-deep:    #6f8b6c;
  --champagne:    #e4d2b8;
  --champagne-dp: #c9b18c;
  --warm-brown:   #6b4f3f;
  --deep-green:   #2f4a3c;
  --ink:          #3a2e2a;
  --ink-soft:     #7a6a62;
  --ink-faint:    #a89a92;
  --line:         rgba(107, 79, 63, 0.14);
  --line-strong:  rgba(107, 79, 63, 0.26);

  /* --- surfaces --- */
  --surface:      #fffdfa;
  --surface-2:    #fbf5ee;
  --surface-glass: rgba(255, 253, 250, 0.82);

  /* --- typography --- */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* --- shadow --- */
  --sh-1: 0 1px 2px rgba(74, 51, 40, 0.05), 0 4px 12px rgba(74, 51, 40, 0.06);
  --sh-2: 0 2px 6px rgba(74, 51, 40, 0.06), 0 12px 28px rgba(74, 51, 40, 0.10);
  --sh-3: 0 8px 20px rgba(74, 51, 40, 0.10), 0 28px 60px rgba(74, 51, 40, 0.16);

  /* --- motion --- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.5, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 480ms;

  /* --- layout --- */
  --tap: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--ivory);
  background-image:
    radial-gradient(1200px 700px at 15% -10%, rgba(247, 221, 226, 0.55), transparent 62%),
    radial-gradient(1000px 620px at 92% 4%, rgba(231, 226, 205, 0.42), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(183, 196, 168, 0.30), transparent 65%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ink);
}

p { margin: 0; }

button {
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  font-family: inherit;
  font-size: 16px; /* prevent iOS zoom */
  color: inherit;
}

svg { display: block; }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }