/* ============================================================
   TRELLIS — brand layer over the Munch design system.
   We keep Munch's tokens, fonts, radii, shadows and motion, but
   re-point the semantic BRAND from cooked-orange to leaf-green
   (a grow app is green), and add care-domain accent aliases.
   ============================================================ */

:root {
  /* ---- Re-point brand to leaf ---- */
  --brand:          var(--leaf-500);
  --brand-hover:    var(--leaf-600);
  --brand-press:    var(--leaf-700);
  --brand-soft:     var(--leaf-100);
  --brand-soft-ink: var(--leaf-700);
  --on-brand:       #FFFFFF;
  --text-link:      var(--leaf-600);
  --focus-ring:     var(--leaf-400);
  --ring-focus:     0 0 0 3px rgba(30, 158, 85, 0.30);
  --ring-soft:      0 0 0 4px var(--leaf-100);

  /* Warm cream paper stays, but cooled a hair toward the garden */
  --surface-app:  #F7F6EF;
  --surface-sunk: #EFEEE3;

  /* ---- Care-domain semantic accents ---- */
  --water:        var(--info-500);     /* watering — blue */
  --water-soft:   #E3EFFC;
  --water-ink:    #1B5FB0;
  --nutrient:     var(--grape-500);    /* vitamins / nutrients — purple */
  --nutrient-soft:var(--grape-100);
  --nutrient-ink: var(--grape-700);
  --temp:         var(--orange-500);   /* temperature — warm */
  --temp-soft:    var(--orange-100);
  --temp-ink:     var(--orange-700);
  --humidity:     #4F9BEA;             /* humidity — cool blue */
  --humidity-soft:#E3EFFC;
  --streak:       var(--gold-400);     /* light hours / streak / XP */
  --overdue:      var(--danger-500);   /* overdue tasks / alerts */
  --overdue-soft: #FBE6E4;

  /* Plant stage colors */
  --stage-seedling: var(--leaf-300);
  --stage-veg:      var(--leaf-500);
  --stage-flower:   var(--grape-400);
  --stage-harvest:  var(--gold-500);

  /* The popped-button bottom shadow follows the brand now */
  --shadow-pop: 0 4px 0 var(--leaf-700);
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: #20271F;            /* dim grow-room backdrop behind the device */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
::-webkit-scrollbar { width: 0; height: 0; }
*::selection { background: var(--leaf-200); }

/* keyframes used across screens */
@keyframes trellis-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes trellis-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes trellis-sheet-up {
  from { transform: translateY(40px); }
  to   { transform: translateY(0); }
}
@keyframes trellis-scrim {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes trellis-pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes trellis-ripple {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@keyframes trellis-leaf-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translate(var(--drift, 0), 960px) rotate(var(--rot, 360deg)); opacity: 0; }
}
@keyframes trellis-spin { to { transform: rotate(360deg); } }
@keyframes trellis-livepulse {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}