/* ============================================
   ROSÉE — brand stylesheet
   "Dried flowers, not fresh ones. Golden hour
   through a fogged mirror."
   Every page links this file. Never hardcode a
   color, font, or spacing value in a page —
   use these variables instead.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;1,500&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* --- brand colors (Rosée V1 palette) --- */
  --fogwash:        #EDE3E1;  /* the ground everything sits on */
  --fogwash-deep:   #E4D5D2;  /* deeper background band */
  --card:           #FBF8F7;  /* card / panel surface */
  --smoke-rose:     #D9BFC0;  /* card + border tone, one step darker than fogwash */
  --ash-petal:      #9B8F93;  /* warm mauve-grey, secondary accent */
  --ash-petal-deep: #6F6669;  /* text-safe version of ash petal */
  --haze-mauve:     #8C7A93;  /* primary accent — buttons, links, "the haze" */
  --haze-mauve-deep:#6B5A73;  /* primary hover / pressed, text-safe */
  --ink:            #2E2529;  /* primary text, warm near-black */
  --ink-soft:       #6B5C60;  /* secondary text */
  --white:          #FFFFFF;

  /* --- type --- */
  --font-heading: 'Bodoni Moda', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* --- spacing scale (8px base) --- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;

  /* --- shape --- */
  --radius: 24px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* --- layout --- */
  --container: 1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fogwash);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--sp-2) 0;
  color: var(--ink);
}

h1 { font-size: 52px; font-weight: 500; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }

p { margin: 0 0 var(--sp-3) 0; color: var(--ink-soft); }

a { color: var(--haze-mauve-deep); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* --- buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--haze-mauve);
  color: var(--white);
}
.btn-primary:hover { background: var(--haze-mauve-deep); }

.btn-secondary {
  background: transparent;
  color: var(--haze-mauve-deep);
  border-color: var(--haze-mauve);
}
.btn-secondary:hover { background: var(--smoke-rose); }

/* --- nav --- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0;
}

.site-nav .logo {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  font-style: italic;
  color: var(--haze-mauve-deep);
  text-decoration: none;
  letter-spacing: 1px;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}

.site-nav a:hover { color: var(--haze-mauve-deep); }

/* --- footer --- */
.site-footer {
  background: var(--fogwash-deep);
  margin-top: var(--sp-10);
  padding: var(--sp-8) 0 var(--sp-4) 0;
}

.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-soft);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li { margin-bottom: var(--sp-1); }

.site-footer a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}

.site-footer a:hover { color: var(--haze-mauve-deep); }

.footer-bottom {
  border-top: 1px solid var(--smoke-rose);
  padding-top: var(--sp-3);
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  text-align: center;
}

/* --- shared sections --- */
.section { padding: var(--sp-10) 0; }
.section-tight { padding: var(--sp-8) 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--haze-mauve-deep);
  margin-bottom: var(--sp-2);
  display: block;
  white-space: nowrap;
}

.tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-right: var(--sp-1);
  margin-bottom: var(--sp-1);
}

.tag-rose { background: var(--smoke-rose); color: var(--ink); }
.tag-sage { background: transparent; color: var(--ash-petal-deep); border: 1.5px solid var(--ash-petal); padding: 4.5px 14.5px; }
.tag-lavender { background: transparent; color: var(--haze-mauve-deep); border: 1.5px solid var(--haze-mauve); padding: 4.5px 14.5px; }

/* --- placeholder art blocks (until real photos exist) --- */
.art-block {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-3);
}

.art-block::before {
  content: '';
  width: 20px;
  height: 26px;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 36' fill='white'%3E%3Cpath d='M14 0C14 0 2 16 2 24a12 12 0 0 0 24 0C26 16 14 0 14 0z'/%3E%3C/svg%3E");
}

.art-rose { background: linear-gradient(160deg, var(--haze-mauve), var(--haze-mauve-deep)); }
.art-sage { background: linear-gradient(160deg, var(--ash-petal), var(--ash-petal-deep)); }
.art-lavender { background: linear-gradient(160deg, var(--smoke-rose), var(--haze-mauve)); }
.art-blush { background: linear-gradient(160deg, var(--fogwash-deep), var(--smoke-rose)); color: var(--ink); }

/* soft blurred "fogged mirror" backdrop for hero moments */
.hero-fog {
  background:
    radial-gradient(circle at 20% 25%, rgba(217, 191, 192, 0.75) 0%, transparent 65%),
    radial-gradient(circle at 82% 15%, rgba(140, 122, 147, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 55% 90%, rgba(155, 143, 147, 0.35) 0%, transparent 65%),
    var(--fogwash);
}

@media (max-width: 800px) {
  h1 { font-size: 38px; }
  h2 { font-size: 28px; }
  .site-nav ul { gap: var(--sp-2); }
  .site-nav ul li:not(:first-child) a { font-size: 14px; }
}

/* --- forms --- */
label { display:block; font-weight:700; font-size:14px; margin-bottom:6px; color:var(--ink); }
input, textarea, select {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--smoke-rose);
  background: var(--card);
  color: var(--ink);
  width: 100%;
  margin-bottom: var(--sp-3);
}
.form-narrow { max-width: 440px; }

/* --- generic card --- */
.card { background: var(--card); border-radius: var(--radius); padding: var(--sp-4); }

/* --- quiz --- */
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--smoke-rose);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}
.quiz-option.selected { border-color: var(--haze-mauve); background: var(--fogwash-deep); }
.quiz-step { display: none; }
.quiz-step.active { display: block; }

/* --- reviews --- */
.review-card { background: var(--card); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.stars { color: var(--haze-mauve-deep); font-size: 15px; letter-spacing: 2px; font-family: var(--font-mono); }

/* --- ingredient table --- */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--smoke-rose); }
table.data-table th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); }

/* --- placeholder note box (for demo-only features) --- */
.demo-note {
  border: 1.5px dashed var(--ash-petal);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  font-size: 14px;
  color: var(--ink-soft);
}