/*
brand-overrides.css
Overrides brand variables and component styles to match Poop Tracker's in-app
palette: deep violet canvas + slightly lighter violet panels + peach accent +
light lavender text. Loaded after styles.css so these rules win.
*/

:root {
  /* Original variable names kept so the rest of the stylesheet still works. */
  --brand-blue: #F8B58C;       /* warm peach accent (primary) */
  --brand-blue-dark: #E89B70;  /* darker peach for buttons / hover */
  --brand-blue-light: #FFD0B0; /* light peach for subtle accents */
  --text-on-blue: #1B1230;     /* dark violet text on peach surfaces */
  --surface: #1B1230;          /* deep violet page background (matches app) */
  --text: #F4ECFF;             /* light lavender text on dark surfaces */
  --muted: #B7A8D4;            /* muted lavender for secondary text */

  /* New tokens used by the dark theme below */
  --panel: #2A1E47;            /* soft violet panel (card background) */
  --panel-border: rgba(244, 236, 255, 0.08);
  --divider: rgba(244, 236, 255, 0.08);
}

/* Page background uses the deep-violet surface color */
body.page {
  background: var(--surface);
  color: var(--text);
}

/* Headings inherit the light text color */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}

/* Cards become dark violet panels instead of white sheets */
.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  color: var(--text);
}

/* Divider between card sections — subtle lavender line, not solid grey */
.card-section + .card-section {
  border-top: 1px solid var(--divider);
}

/* Section titles get a soft peach tint to match the app's accent */
.section-title {
  color: var(--brand-blue);
}

/* Muted timestamps / captions get a readable lavender, not pale grey */
.muted-text {
  color: var(--muted);
}

/* Links inside cards use the peach accent */
a,
.text-link {
  color: var(--brand-blue);
}

a:hover,
.text-link:hover {
  color: var(--brand-blue-light);
}

/* Form inputs: dark panel with light text + peach focus ring */
.form-input,
.form-textarea {
  background: rgba(244, 236, 255, 0.06);
  border: 1px solid var(--panel-border);
  color: var(--text);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--muted);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 1px rgba(248, 181, 140, 0.35) !important;
}

.form-label {
  color: var(--text);
}

.optional {
  color: var(--muted);
}

/* Primary button: peach background with dark violet text */
.btn-primary {
  background-color: var(--brand-blue);
  color: var(--text-on-blue);
  box-shadow: 0 10px 25px rgba(232, 155, 112, 0.35) !important;
}

.btn-primary:hover {
  background-color: var(--brand-blue-light);
  color: var(--text-on-blue);
}

.btn-primary:active {
  box-shadow: 0 6px 16px rgba(232, 155, 112, 0.35) !important;
}

/* Header: deep violet bar with light text, peach hover */
.page-header {
  background: rgba(7, 4, 17, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--panel-border);
  color: var(--text);
}

.brand-link {
  color: var(--text);
}

.nav-link {
  color: rgba(244, 236, 255, 0.75);
}

.nav-link:hover {
  background-color: rgba(248, 181, 140, 0.12);
  color: var(--text);
}

.nav-link-active {
  background-color: rgba(248, 181, 140, 0.18);
  color: var(--text);
}

/* Footer text on the dark page */
.page-footer,
.footer-text {
  color: var(--muted);
}

/* App-store badge: Apple guidelines forbid modifying the badge itself.
   No border, no shadow, no radius. Just a hover lift on the link wrapper. */
.app-store-link {
  display: inline-block;
  transition: transform 0.15s ease;
}

.app-store-link:hover {
  transform: translateY(-1px);
}

/* Hero icon: subtle peach glow */
.hero-icon {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}