/* =====================================================================
   Theme 02 · "Blush 300"
   Soft tint built on the 300 step of the brand ramps —
   Maroon-300 #E2979E · Olive-300 #D1D2A6.
   Loaded AFTER css/styles.css; only re-points tokens + a few surfaces.
   ===================================================================== */

:root {
  /* ---- Tint pair that names the theme ---- */
  --tint:        #E2979E;   /* maroon-300 */
  --tint-2:      #D1D2A6;   /* olive-300  */

  /* Legacy brand-tint names, re-pointed onto the 300 step */
  --cream:       #FDF0F1;
  --light-green: #D1D2A6;
  --muted-sage:  #BCBE8E;
  --terracotta:  #D76F79;
  --linen:       #FBF4F4;
  --blush:       #E2979E;
  --butter:      #F7E9CC;

  /* Warm neutrals shifted rose-ward — and lifted well off black.
     --ink drives every title on the app (greeting name, app-bar titles,
     collection names, product names), so it sets the overall weight.
     The three steps move together to keep the hierarchy readable. */
  --ink:        #7D666A;   /* titles — ~5.3:1 on white */
  --ink-soft:   #9C868A;   /* secondary / subtitles */
  --ink-faint:  #BCAAAE;   /* captions, inactive nav */
  --line:       #F1E0E2;
  --line-soft:  #F8EDEE;
  --surface:    #ffffff;
  --surface-2:  #FDF4F5;
  --ph:         #F7E6E8;
  --ph-2:       #F0D8DB;

  /* Accent ramp lives on the LIGHT steps — the whole theme reads as a
     300 tint, so nothing drops to maroon-600/800 any more. These two
     tokens back ~150 rules in styles.css, so re-pointing them here is
     what carries the light treatment across every screen. */
  --leaf:       #E2979E;   /* maroon-300 — fills, dots, rules, borders */
  --leaf-soft:  #FDF0F1;   /* palest wash behind accent text */
  --leaf-ink:   #D76F79;   /* maroon-400 — accent text/labels */

  --good:       #A8AA6C;
  --warn:       #e2bd63;
  --alert:      #D76F79;

  --shadow:     0 10px 28px rgba(215, 111, 121, .13);
  --shadow-sm:  0 3px 12px rgba(215, 111, 121, .09);
}

/* Page backdrop behind the phone — plain white */
body { background: #ffffff; }

/* Section headings sit back: lighter weight, softer ink */
.section-title { font-weight: 600; color: var(--ink-soft); }

/* Splash / flow-select washes pick up the blush */
.splash-wrap,
.flow-select {
  background: linear-gradient(170deg, var(--cream) 0%, var(--linen) 55%, #ffffff 100%);
}

/* Headers stay white but sit on a hairline of the tint */
.home-header { border-bottom: 1px solid var(--line-soft); }

.search-bar { background: #FDF4F5; border-color: var(--line); }

/* Bottom nav — warm white glass */
.bottom-nav { background: rgba(255, 251, 252, .94); }

/* Soft-tint accents: chips, badges and pills lean on the 300 step
   (label ink is set with the other chips, further down) */
.fs-badge { background: var(--leaf-soft); }

/* Intro tag punctuates with the accent — Living Olive, lightest steps
   (olive-100 wash, olive-600 label ~4.6:1 — AA at 22px/800) */
.intro-tag {
  background: var(--olive-100);
  color: var(--olive-600);
  border-color: var(--olive-200);
}

.fs-card-b { background: #FCEFF1; border-color: var(--tint); }

/* Cards keep white bodies with a rose hairline */
.card { border-color: var(--line); }

/* =====================================================================
   Buttons carry the 300 step
   The tint itself becomes the fill (#E2979E) and filled buttons take a
   white label on it, per design direction.
   ===================================================================== */
:root {
  --btn:      #E2979E;   /* maroon-300 — filled button fill */
  --btn-ink:  #ffffff;   /* label / icon on that fill */
}

.btn-primary,
.buy-now,
.checkout-btn,
.add-plant-btn,
.add-mini,
.add-full,
.scan-search-btn,
.ai-card .start,
.action-card .ac-ico {
  background: var(--btn);
  color: var(--btn-ink);
}

/* The centre nav action keeps its lift, in the 300 pair */
.nav-fab-btn {
  background: linear-gradient(150deg, var(--btn) 0%, var(--terracotta) 100%);
  color: var(--btn-ink);
  box-shadow: 0 8px 18px rgba(226, 151, 158, .48), 0 0 0 5px var(--surface);
}

/* Outlined / soft buttons take the tint on their edge */
.btn-outline { color: var(--leaf-ink); border-color: var(--btn); }
.buy-add     { border-color: var(--btn); }

/* =====================================================================
   Inline accent text — maroon-400, the lightest step that still holds
   its own as type. "See All", prices, active tab, "Shop Now →".
   ===================================================================== */
.link-btn,
.price,
.pdp-price,
.ci-price,
.order-total,
.look-card .lk-link,
.nav-item.active { color: var(--maroon-400); }

/* Carousel dots, tab indicator and other small accent marks — maroon-300,
   the tint itself. These are shapes, not type, so they go all the way light. */
.nav-item.active::before,
.dot.active { background: var(--maroon-300); }

/* =====================================================================
   Filled accent surfaces — the four cards that used a
   maroon-800 → maroon-600 gradient behind white text.
   Re-cut on the 400 → 300 pair so they read as tinted washes. Labels
   stay white, matching how filled buttons already sit on #E2979E.
   ===================================================================== */
.garden-hero,
.streak-card,
.promo-block,
.ai-card.mp-card {
  background: linear-gradient(135deg, var(--maroon-400), var(--maroon-300));
}
.garden-hero,
.streak-card,
.promo-block { color: #ffffff; }

/* Small chips sitting on those washes keep a light fill */
.promo-block .cta,
.promo-block--personal .cta { color: var(--maroon-500); }

/* Personal gifting card — already light, just re-pair it */
.promo-block--personal { background: linear-gradient(135deg, var(--maroon-300), var(--maroon-200)); }

/* Progress + streak bars follow the light pair */
.ls-bar-fill { background: linear-gradient(90deg, var(--maroon-300), var(--maroon-400)); }

/* =====================================================================
   Chip legibility
   Small pill labels sit on the pale washes, so their ink needs one more
   step than body accent text — maroon-500 clears 4:1 on #FDF0F1 while
   still reading light. The two chips that used a SATURATED fill
   (--blush) get a wash instead, or label and fill collapse into
   each other.
   ===================================================================== */
.sev-red,
.pdp-stock.out,
.auth-err,
.order-status.cancelled { background: var(--maroon-100); color: var(--maroon-500); }

/* On the pale wash the error banner loses its edge, so give it a hairline */
.auth-err { border: 1px solid var(--maroon-200); }

/* Logout's pressed state fills with --blush, which would swallow its
   own --alert label for the duration of the tap */
.prof-logout:active { background: var(--maroon-100); }

.fs-badge,
.sev-green,
.sp-tag.in-mine,
.opt-pill.on,
.var-opt.on,
.buy-add,
.addr-tag,
.scan-opt-ico,
.cp-ic { color: var(--maroon-500); }

/* Delivered / OK status — olive-400 on olive-100 was ~2:1 */
.order-status.ok { color: var(--olive-700); background: var(--olive-100); }

/* The few amber chips hard-code a dark ochre in the base sheet — lift those
   too so nothing on the page sits at the dark end. */
.sev-amber,
.pdp-stock.low,
.order-status.transit { color: #b08a2a; background: #fdf3e0; }
.dr-followup { color: #a8862f; }