/*
 * VerdiGrow — design tokens.
 *
 * Palette drawn from the operation's real materials: soil, seed-packet paper,
 * foliage, terracotta, sensor blue, weathered stake wood.
 *
 * USE THESE TOKENS. Don't introduce new colors.
 *
 * Signature element: the seed-stake card (.vg-stake) — the container header is
 * styled as a physical plant stake, tying the digital record to the tag in the soil.
 */

:root {
  /* surfaces */
  --vg-soil:      #2A2620;  /* dark earth — primary dark surface */
  --vg-soil-2:    #35302A;
  --vg-soil-3:    #413A32;
  --vg-paper:     #F3EEE3;  /* aged seed-packet paper — light surface */
  --vg-paper-2:   #E7DFCE;
  --vg-card:      #FBF8F1;

  /* accents */
  --vg-leaf:      #4C7A34;  /* deep foliage — primary accent */
  --vg-leaf-dk:   #3A5F27;
  --vg-sprout:    #8BB04A;  /* young growth — highlight */
  --vg-clay:      #B36A3E;  /* terracotta — attention/warning, used SPARINGLY */
  --vg-sky:       #4E8CA8;  /* water/sensor blue — metrics */
  --vg-stake:     #C9B896;  /* weathered wood — the stake card */

  /* ink */
  --vg-ink:       #2A2620;
  --vg-ink-soft:  #6A6157;
  --vg-ink-faint: #9C9585;
  --vg-line:      #D9CFBB;

  /* type */
  --vg-display: 'Fraunces', Georgia, serif;      /* plant names, headers — RESTRAINED */
  --vg-body:    'Inter', system-ui, sans-serif;
  --vg-mono:    'JetBrains Mono', monospace;     /* metrics, dates, entity IDs */

  --vg-radius: 12px;
}

/*
 * Field UI constraints — the panel is used outdoors, one-handed, with dirt on
 * your hands, in bright sun, on poor greenhouse WiFi:
 *   - high contrast
 *   - large tap targets (min 44px)
 *   - minimal fine text
 *   - fast first paint
 */

.vg-stake {
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.02) 22px 23px),
    var(--vg-stake);
  border: 1px solid #B6A483;
  border-radius: 10px 10px 4px 4px;
  padding: 14px 15px 16px;
  box-shadow: 0 2px 0 #A8977A;
}

/* the notch that makes it read as a plant stake */
.vg-stake::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 14px solid var(--vg-stake);
  filter: drop-shadow(0 2px 0 #A8977A);
}

.vg-stake h1 {
  font-family: var(--vg-display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.05;
  margin: 8px 0 2px;
  color: #33291B;
}

.vg-btn {
  min-height: 44px;              /* dirt-hands tap target */
  border-radius: 10px;
  font-family: var(--vg-body);
  font-weight: 700;
  font-size: 15px;
  border: none;
  background: var(--vg-leaf);
  color: #fff;
  cursor: pointer;
}

.vg-metric-value {
  font-family: var(--vg-mono);
  font-weight: 600;
}