/* ==============================================
   dream-human-brand.css
   Warm cream palette for the Dream Reflection
   pages on DreamMeaning.today
   ============================================== */

/* ---- Palette tokens ---- */
:root {
  --dr-cream:       #FBF7F1;
  --dr-cream-mid:   #F3E7D8;
  --dr-cream-deep:  #EAD8C4;
  --dr-near-white:  #FFFDFC;
  --dr-border:      #E2D3C2;

  --dr-ink:         #2A211B;
  --dr-ink-deep:    #241A14;
  --dr-body:        #5F5047;
  --dr-muted:       #6A5C52;
  --dr-muted-alt:   #6A4E3D;
  --dr-warm-brown:  #7B5E45;
  --dr-btn-text:    #4E4037;
  --dr-placeholder: #A89A90;
  --dr-hint:        #8A7B70;
  --dr-hover-ink:   #44362D;
  --dr-hover-border:#9C7B5B;

  --dr-sand-light:  #D8C7B6;
  --dr-sand-mid:    #C8B5A0;
  --dr-sand-warm:   #EAD8C4;
  --dr-light-text:  #E9DED4;
  --dr-lighter-text:#F4ECE5;
}

/* ---- Base: override site-wide dark background ---- */
html.dr-page,
html.dr-page body {
  background-color: var(--dr-cream) !important;
  color: var(--dr-ink);
}

/* ---- Hero ---- */
.dr-hero {
  background: linear-gradient(
    135deg,
    var(--dr-cream)      0%,
    var(--dr-cream-mid)  55%,
    var(--dr-cream-deep) 100%
  );
}

/* ---- Typography ---- */
.dr-h1 {
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--dr-ink-deep);
}
@media (min-width: 768px) {
  .dr-h1 { font-size: 3.75rem; }
}

.dr-h2 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dr-ink-deep);
}

.dr-lead {
  margin-bottom: 2rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 2rem;
  color: var(--dr-body);
}
@media (min-width: 768px) {
  .dr-lead { font-size: 1.25rem; }
}

.dr-body-text {
  line-height: 1.875rem;
  color: var(--dr-body);
}

.dr-muted-text {
  color: var(--dr-muted);
}

.dr-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--dr-hint);
}

.dr-small {
  font-size: 0.875rem;
  color: var(--dr-hint);
}

/* ---- Pill / badge ---- */
.dr-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dr-warm-brown);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  margin-bottom: 1rem;
}

.dr-emotion-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: var(--dr-cream);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dr-warm-brown);
  margin-bottom: 1.25rem;
}

/* ---- Buttons ---- */
.dr-btn-primary {
  display: inline-flex;
  border-radius: 9999px;
  background: var(--dr-ink);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  transition: background 0.15s;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.dr-btn-primary:hover { background: var(--dr-hover-ink); }

/* ---- Form label ---- */
.dr-label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dr-warm-brown);
}

/* ---- Emotion select buttons ---- */
.dr-emotion-btn {
  display: block;
  border-radius: 1rem;
  border: 1px solid var(--dr-border);
  background: var(--dr-cream);
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dr-btn-text);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  cursor: pointer;
  user-select: none;
}
.dr-emotion-btn:hover  { border-color: var(--dr-hover-border); }
.dr-emotion-btn.selected {
  border-color: var(--dr-ink);
  background: var(--dr-ink);
  color: #fff;
}

/* ---- Textarea ---- */
.dr-textarea {
  width: 100%;
  border-radius: 1.5rem;
  border: 1px solid var(--dr-border);
  background: var(--dr-near-white);
  padding: 1.25rem;
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--dr-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.dr-textarea::placeholder { color: var(--dr-placeholder); }
.dr-textarea:focus {
  border-color: var(--dr-warm-brown);
  box-shadow: 0 0 0 4px var(--dr-cream-deep);
}

/* ---- Cards ---- */
.dr-card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.07),
    0 4px  6px -4px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) { .dr-card { padding: 2.5rem; } }

.dr-card-h2 {
  margin-bottom: 0.75rem;
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--dr-ink-deep);
}

.dr-card-lead { color: var(--dr-muted); }

/* ---- Section backgrounds ---- */
.dr-section-warm {
  border-radius: 1.5rem;
  background: var(--dr-cream);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dr-section-outlined {
  border-radius: 1.5rem;
  background: var(--dr-near-white);
  border: 1px solid var(--dr-border);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dr-section-dark {
  border-radius: 1.5rem;
  background: var(--dr-ink);
  padding: 1.5rem;
  color: #fff;
}
@media (min-width: 768px) { .dr-section-dark { padding: 2rem; } }

/* ---- Symbol cards ---- */
.dr-symbol-card {
  border-radius: 1.5rem;
  border: 1px solid var(--dr-border);
  background: var(--dr-near-white);
  padding: 1.25rem;
}

.dr-symbol-name {
  margin-bottom: 0.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dr-ink-deep);
}

/* ---- Theme pills ---- */
.dr-theme-pill {
  border-radius: 9999px;
  background: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dr-muted-alt);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ---- Journal question number badge ---- */
.dr-q-badge {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--dr-ink);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

/* ---- Contribution (dark) section internals ---- */
.dr-contrib-kicker {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dr-sand-light);
}

.dr-contrib-body { color: var(--dr-light-text); }

.dr-contrib-inset {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.dr-contrib-inset p {
  font-size: 0.875rem;
  line-height: 1.75rem;
  color: var(--dr-lighter-text);
}

.dr-contrib-tag {
  font-size: 0.875rem;
  color: var(--dr-sand-light);
  margin-bottom: 1.25rem;
}

.dr-contrib-btn {
  border-radius: 9999px;
  background: var(--dr-sand-light);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dr-ink);
  border: none;
  cursor: not-allowed;
}

/* ---- Privacy note ---- */
.dr-note {
  border-radius: 1.5rem;
  background: var(--dr-cream);
  padding: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.625rem;
  color: var(--dr-muted);
}
.dr-note strong { color: var(--dr-ink); }

/* ---- Feature cards (form page bottom) ---- */
.dr-feat-card {
  border-radius: 1.5rem;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dr-feat-h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dr-ink-deep);
}

.dr-feat-p {
  line-height: 1.75rem;
  color: var(--dr-muted);
}

/* ---- Back link ---- */
.dr-back {
  display: inline-flex;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dr-warm-brown);
  text-decoration: none;
}
.dr-back:hover { text-decoration: underline; }

/* ---- details/summary reset ---- */
.dr-details summary { list-style: none; }
.dr-details summary::-webkit-details-marker { display: none; }