/* =====================================================================
   Theme 03 · "Rose 400"
   Medium tint built on the 400 step of the brand ramps —
   Maroon-400 #D76F79 · Olive-400 #BFC184  (Brand Guidelines · 03 Color
   System, transcribed in css/styles.css).

   Structurally IDENTICAL to css/theme-300.css — same rules, same order,
   same white chrome. The only difference is that every brand colour
   moves one step up the ramp: where 300 uses maroon-300 this uses
   maroon-400, where 300 uses maroon-400 this uses maroon-500, and so on.
   Loaded AFTER css/styles.css; only re-points tokens + a few surfaces.
   ===================================================================== */

:root {
  /* ---- Tint pair that names the theme ---- */
  --tint:        #D76F79;   /* maroon-400 */
  --tint-2:      #BFC184;   /* olive-400  */

  /* Legacy brand-tint names, re-pointed onto the 400 step */
  --cream:       #FBE4E7;
  --light-green: #BFC184;
  --muted-sage:  #A8AA6C;
  --terracotta:  #CC4754;
  --linen:       #F7EAEB;
  --blush:       #D76F79;
  --butter:      #F4E2BC;

  /* 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:        #6B565A;   /* titles — ~6.9:1 on white */
  --ink-soft:   #8B757A;   /* secondary / subtitles */
  --ink-faint:  #A38D91;   /* captions, inactive nav */
  --line:       #EED3D6;
  --line-soft:  #F5E3E5;
  --surface:    #ffffff;
  --surface-2:  #FCEFF0;
  --ph:         #F4DCDF;
  --ph-2:       #EBCBCF;

  /* Accent ramp lives on the LIGHT steps — the whole theme reads as a
     400 tint, so nothing drops to maroon-700/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:       #D76F79;   /* maroon-400 — fills, dots, rules, borders */
  --leaf-soft:  #FAE7E9;   /* palest wash behind accent text */
  --leaf-ink:   #CC4754;   /* maroon-500 — accent text/labels */

  --good:       #92954A;
  --warn:       #d8a93c;
  --alert:      #CC4754;

  --shadow:     0 10px 28px rgba(204, 71, 84, .13);
  --shadow-sm:  0 3px 12px rgba(204, 71, 84, .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 rose */
.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: #FCEFF0; border-color: var(--line); }

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

/* Soft-tint accents: chips, badges and pills lean on the 400 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).
   Held at the same steps as Blush 300 so the intro screen matches. */
.intro-tag {
  background: var(--olive-100);
  color: var(--olive-600);
  border-color: var(--olive-200);
}

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

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

/* =====================================================================
   Buttons carry the 400 step
   The tint itself becomes the fill (#D76F79) and filled buttons take a
   white label on it, per design direction.
   ===================================================================== */
:root {
  --btn:      #D76F79;   /* maroon-400 — 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 400 pair */
.nav-fab-btn {
  background: linear-gradient(150deg, var(--btn) 0%, var(--terracotta) 100%);
  color: var(--btn-ink);
  box-shadow: 0 8px 18px rgba(215, 111, 121, .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-500, the lightest step that still holds
   its own as type here. "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-500); }

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

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

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

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

/* =====================================================================
   Chip legibility
   Small pill labels sit on the pale washes, so their ink needs one more
   step than body accent text — maroon-600 clears 4:1 on #F2E7E8 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-600); }

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

/* 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-600); }

/* 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. Amber has no 400 step
   in the brand ramps, so these match Blush 300 exactly. */
.sev-amber,
.pdp-stock.low,
.order-status.transit { color: #b08a2a; background: #fdf3e0; }
.dr-followup { color: #a8862f; }