/* Solenza brand palette — canonical 2026-05-10
   Per dev_brief_quiz_redesign_focus.md §0.5.
   Loaded AFTER app.css so legacy Tailwind class colours are remapped
   onto the new tokens without needing a Tailwind rebuild.
   70% Cream surfaces / 15% Plum brand signature / 15% Charcoal text. */

:root {
  --cream:           #F2EDE4;  /* page bg, the dominant 70% surface */
  --warm-white:      #FAF7F1;  /* card surfaces on cream, hover bg */
  --plum:            #4A2C5C;  /* brand accent — wordmark, CTAs, signature */
  --plum-deep:       #3A2249;  /* hover state on plum */
  --plum-tint:       #E8DEED;  /* subtle fills, selected option highlight */
  --charcoal:        #2A2A2A;  /* body type, headings */
  --charcoal-soft:   #6B6B6B;  /* secondary copy, captions */
  --warm-gray:       #D9D2C5;  /* dividers, borders, hairlines */
  --sage:            #7A8B6F;  /* success states (sparingly) */
  --rust:            #A8554E;  /* form errors only — never bright red */
}

/* ============================================================== */
/* New canonical utility classes — for new code going forward.    */
/* ============================================================== */
.bg-cream         { background-color: var(--cream); }
.bg-warm-white    { background-color: var(--warm-white); }
.bg-plum          { background-color: var(--plum); }
.bg-plum-deep     { background-color: var(--plum-deep); }
.bg-plum-tint     { background-color: var(--plum-tint); }
.bg-charcoal      { background-color: var(--charcoal); }
.bg-warm-gray     { background-color: var(--warm-gray); }
.bg-sage          { background-color: var(--sage); }
.bg-rust          { background-color: var(--rust); }

.text-cream         { color: var(--cream); }
.text-warm-white    { color: var(--warm-white); }
.text-plum          { color: var(--plum); }
.text-plum-deep     { color: var(--plum-deep); }
.text-plum-tint     { color: var(--plum-tint); }
.text-charcoal      { color: var(--charcoal); }
.text-charcoal-soft { color: var(--charcoal-soft); }
.text-sage          { color: var(--sage); }
.text-rust          { color: var(--rust); }

.border-cream     { border-color: var(--cream); }
.border-plum      { border-color: var(--plum); }
.border-charcoal  { border-color: var(--charcoal); }
.border-warm-gray { border-color: var(--warm-gray); }

.hover\:bg-plum-deep:hover    { background-color: var(--plum-deep); }
.hover\:bg-plum-tint:hover    { background-color: var(--plum-tint); }
.hover\:bg-warm-white:hover   { background-color: var(--warm-white); }
.hover\:text-plum:hover       { color: var(--plum); }
.hover\:text-charcoal:hover   { color: var(--charcoal); }
.hover\:border-plum:hover     { border-color: var(--plum); }

/* ============================================================== */
/* Legacy Tailwind class remap — every existing template instantly   */
/* picks up the new palette without find-replace across HTML files.  */
/* These selectors come AFTER app.css so they win on cascade order.  */
/* ============================================================== */

/* ---- Body / page-level ---- */
body { background-color: var(--cream); color: var(--charcoal); }

/* ---- stone-900 → CHARCOAL (text), PLUM (dark surfaces / CTAs) ---- */
.text-stone-900     { color: var(--charcoal); }
.text-stone-800     { color: var(--charcoal); }
.text-stone-700     { color: var(--charcoal); }
.text-stone-600     { color: var(--charcoal-soft); }
.text-stone-500     { color: var(--charcoal-soft); }
.text-stone-400     { color: var(--charcoal-soft); }
.text-stone-300     { color: var(--warm-gray); }
.text-stone-200     { color: var(--cream); }     /* on dark surfaces */
.text-stone-100     { color: var(--cream); }

/* Dark surfaces are brand-signature → plum, not charcoal. */
.bg-stone-900       { background-color: var(--plum); color: var(--cream); }
.bg-stone-800       { background-color: var(--plum); color: var(--cream); }
.bg-stone-700       { background-color: var(--plum-deep); color: var(--cream); }

/* Light stone surfaces → warm cream tones */
.bg-stone-50        { background-color: var(--cream); }
.bg-stone-100       { background-color: var(--warm-white); }
.bg-stone-200       { background-color: var(--warm-gray); }
.bg-stone-300       { background-color: var(--warm-gray); }

/* Borders — drop heavy stone-900 to charcoal, mid-tones to warm-gray */
.border-stone-900   { border-color: var(--charcoal); }
.border-stone-800   { border-color: var(--charcoal); }
.border-stone-700   { border-color: var(--charcoal); }
.border-stone-300   { border-color: var(--warm-gray); }
.border-stone-200   { border-color: var(--warm-gray); }
.border-stone-100   { border-color: var(--warm-gray); }

/* Hover states — keep them subtle in the new palette */
.hover\:bg-stone-900:hover  { background-color: var(--plum-deep); }
.hover\:bg-stone-800:hover  { background-color: var(--plum-deep); }
.hover\:bg-stone-200:hover  { background-color: var(--warm-gray); }
.hover\:bg-stone-100:hover  { background-color: var(--warm-white); }
.hover\:bg-stone-50:hover   { background-color: var(--warm-white); }
.hover\:text-stone-900:hover { color: var(--charcoal); }
.hover\:border-stone-900:hover { border-color: var(--charcoal); }
.focus\:border-stone-900:focus { border-color: var(--charcoal); }
.focus\:bg-stone-900:focus  { background-color: var(--plum); color: var(--cream); }

/* ---- amber-* → PLUM (accents) and PLUM-TINT (subtle fills) ---- */
.bg-amber-50        { background-color: var(--cream); }
.bg-amber-100       { background-color: var(--plum-tint); }
.bg-amber-200       { background-color: var(--plum-tint); }
.bg-amber-300       { background-color: var(--plum); color: var(--cream); }
.bg-amber-400       { background-color: var(--plum); color: var(--cream); }
.bg-amber-500       { background-color: var(--plum); color: var(--cream); }

.text-amber-300     { color: var(--plum); }
.text-amber-400     { color: var(--plum); }
.text-amber-500     { color: var(--plum); }
.text-amber-600     { color: var(--plum); }
.text-amber-700     { color: var(--plum); }
.text-amber-800     { color: var(--plum-deep); }
.text-amber-900     { color: var(--plum-deep); }

.border-amber-200   { border-color: var(--warm-gray); }
.border-amber-300   { border-color: var(--plum); }
.border-amber-400   { border-color: var(--plum); }
.border-amber-500   { border-color: var(--plum); }

.hover\:bg-amber-50:hover  { background-color: var(--plum-tint); }
.hover\:bg-amber-100:hover { background-color: var(--plum-tint); }
.hover\:bg-amber-300:hover { background-color: var(--plum-deep); }
.hover\:border-amber-300:hover { border-color: var(--plum-deep); }

/* ---- blue-* → cream + plum-tint (third-colour violation removed) ---- */
.bg-blue-50         { background-color: var(--cream); }
.bg-blue-100        { background-color: var(--plum-tint); }
.bg-blue-500        { background-color: var(--plum); color: var(--cream); }
.bg-blue-600        { background-color: var(--plum); color: var(--cream); }
.text-blue-600      { color: var(--plum); }
.text-blue-700      { color: var(--plum); }
.text-blue-800      { color: var(--plum-deep); }
.text-blue-900      { color: var(--plum-deep); }
.border-blue-300    { border-color: var(--warm-gray); }
.border-blue-400    { border-color: var(--plum); }
.border-blue-500    { border-color: var(--plum); }
.hover\:text-blue-900:hover { color: var(--plum-deep); }

/* ---- emerald-* → SAGE (sparingly) ---- */
.bg-emerald-50      { background-color: var(--warm-white); }
.bg-emerald-100     { background-color: var(--warm-white); }
.bg-emerald-400     { background-color: var(--sage); color: var(--cream); }
.bg-emerald-500     { background-color: var(--sage); color: var(--cream); }
.bg-emerald-600     { background-color: var(--sage); color: var(--cream); }
.text-emerald-700   { color: var(--sage); }
.text-emerald-800   { color: var(--sage); }
.text-emerald-900   { color: var(--charcoal); }
.border-emerald-200 { border-color: var(--warm-gray); }
.border-emerald-300 { border-color: var(--sage); }
.border-emerald-500 { border-color: var(--sage); }
.border-emerald-700 { border-color: var(--sage); }
.hover\:bg-emerald-700:hover { background-color: var(--sage); filter: brightness(0.85); }

/* ---- red-* → RUST (errors only) ---- */
.bg-red-50          { background-color: rgba(168, 85, 78, 0.06); }
.bg-red-100         { background-color: rgba(168, 85, 78, 0.12); }
.bg-red-500         { background-color: var(--rust); color: var(--cream); }
.bg-red-600         { background-color: var(--rust); color: var(--cream); }
.text-red-600       { color: var(--rust); }
.text-red-700       { color: var(--rust); }
.text-red-800       { color: var(--rust); }
.text-red-900       { color: var(--rust); }
.border-red-300     { border-color: var(--rust); }
.border-red-400     { border-color: var(--rust); }
.border-red-500     { border-color: var(--rust); }

/* ---- bg-white → WARM-WHITE (cards on cream) ---- */
.bg-white           { background-color: var(--warm-white); }
.text-white         { color: var(--cream); }
.bg-black           { background-color: var(--plum-deep); color: var(--cream); }
.hover\:bg-black:hover { background-color: var(--plum-deep); }

/* ---- Component-specific tweaks ---- */
/* .btn-primary lives in app.css (compiled from site.css); colours go plum */
.btn-primary {
  background-color: var(--plum);
  color: var(--cream);
  border-color: var(--plum);
}
.btn-primary:hover {
  background-color: var(--plum-deep);
  border-color: var(--plum-deep);
}

.btn-secondary {
  background-color: var(--warm-white);
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn-secondary:hover {
  background-color: var(--plum-tint);
}

/* Quiz options — clearly visible buttons against the warm-white card.
   1px warm-gray hairline + cream bg so each option reads as a tappable
   button (the brief's "frameless" intent left them invisible — warm-white
   on warm-white is the same surface). Premium-restraint preserved by
   keeping the border thin and the bg distinct only by ~1 step on the
   warm scale. */
.quiz-option {
  background-color: var(--cream);
  border: 1px solid var(--warm-gray) !important;   /* hairline, not chunky */
  color: var(--charcoal);
  transition: background 120ms, border-color 120ms;
}
.quiz-option:hover {
  background-color: var(--plum-tint);
  border-color: var(--plum) !important;
  transform: none !important;
}
.quiz-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--plum);
  border-color: var(--plum) !important;
}
.quiz-option.selected {
  background-color: var(--plum);
  color: var(--cream);
  border-color: var(--plum) !important;
  transform: none !important;
}
.quiz-option.selected .quiz-option-meta { color: var(--plum-tint); }
.quiz-option-meta { color: var(--charcoal-soft); }

/* Progress bar (.progress-bar from site.css) */
.progress-bar           { background-color: var(--warm-gray); }
.progress-bar > span    { background-color: var(--plum); }

/* Tip cards on result page */
.tip {
  background-color: var(--warm-white);
  border-color: var(--warm-gray);
  color: var(--charcoal);
}
.tip-num {
  background-color: var(--plum);
  color: var(--cream);
}
.tip-text { color: var(--charcoal); }

/* Stat blocks */
.stat {
  background-color: var(--warm-white);
  border-color: var(--charcoal);
}
.stat-num   { color: var(--charcoal); }
.stat-label { color: var(--charcoal-soft); }

/* Result display headline */
.result-headline { color: var(--charcoal); }

/* Microcopy callout */
.microcopy {
  background-color: var(--plum-tint);
  border-left-color: var(--plum);
  color: var(--charcoal);
}

/* Input borders / focus */
.input-large            { border-color: var(--warm-gray); background-color: var(--warm-white); }
.input-large:focus      { border-color: var(--plum); }
input[type="text"], input[type="email"], input[type="number"], textarea, select {
  background-color: var(--warm-white);
  border-color: var(--warm-gray);
  color: var(--charcoal);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--plum);
  outline: none;
}

/* Inline style overrides used in templates (e.g. style="background:#fef3c7;color:#1c1917"
   on the result-page CTA) — narrow override via attribute selector */
[style*="#fef3c7"] {
  background-color: var(--plum) !important;
  color: var(--cream) !important;
  border-color: var(--plum) !important;
}
[style*="#1c1917"] {
  /* Anything inline-styling stone-900 should now be charcoal */
  color: var(--charcoal) !important;
}

/* ============================================================== */
/* No heavy card borders (founder direction 2026-05-10).             */
/* Cream → warm-white contrast differentiates the card on its own;   */
/* a 2px charcoal frame ringing every block reads old-school.        */
/* Hairline 1px stays for genuine dividers (input borders, table     */
/* rules) but `border-2` / `border-4` are stripped sitewide.         */
/* ============================================================== */
.border-2 { border-width: 0 !important; }
.border-4 { border-width: 0 !important; }
.sm\:border-2 { border-width: 0 !important; }
.sm\:border-4 { border-width: 0 !important; }

/* Hairline borders on inputs / form controls remain at 1px warm-gray */
input.border-2, textarea.border-2, select.border-2,
input.border, textarea.border, select.border {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--warm-gray) !important;
}
input.border-2:focus, textarea.border-2:focus, select.border-2:focus,
input.border:focus, textarea.border:focus, select.border:focus {
  border-color: var(--plum) !important;
}

/* Subtle elevation so cards still feel separate from the cream page */
.rounded-2xl, .rounded-3xl, .sm\:rounded-2xl, .sm\:rounded-3xl,
.rounded-xl, .sm\:rounded-xl,
.rounded-\[2rem\], .sm\:rounded-\[2\.5rem\] {
  box-shadow: 0 1px 3px rgba(42, 42, 42, 0.04), 0 1px 2px rgba(42, 42, 42, 0.03);
}
/* No shadow on dark hero blocks (plum surfaces) — keep flat */
.bg-stone-900.rounded-2xl, .bg-stone-900.rounded-3xl,
.bg-plum.rounded-2xl, .bg-plum.rounded-3xl,
.bg-stone-900.rounded-xl, .bg-plum.rounded-xl {
  box-shadow: none;
}
/* Quiz options keep no shadow (they're frameless text-as-button) */
.quiz-option { box-shadow: none !important; }
/* Buttons (.btn-primary etc) shouldn't pick up the card shadow */
button.rounded-xl, button.rounded-2xl, button.rounded-full,
a.rounded-xl, a.rounded-2xl, a.rounded-full,
.btn-primary, .btn-secondary {
  box-shadow: none !important;
}

/* ---- Brand-signature surfaces (per brief §0.5) ---- */
/* Wordmark goes plum — brand signature moment */
header a.font-display {
  color: var(--plum);
}

/* Reservation pill / passport badge — eyebrow text on plum-tint */
[data-section="passport"] .bg-stone-50 {
  background-color: var(--warm-white);
  border-color: var(--warm-gray);
}

/* §13 authority cert logo placeholder boxes — plum hairline, not stone */
.border.border-stone-300 {
  border-color: var(--warm-gray);
}