/* Evertreen brand tokens. Source of truth: evertreen.com production CSS.
   Extracted 2026-05-26. Use these CSS variables in every Evertreen-styled page. */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&display=swap');

:root {
  /* === Brand colors (lifted directly from evertreen.com) === */
  --ev-primary:        #008636;  /* vivid green, primary CTAs */
  --ev-primary-light:  #CBE08D;  /* pale yellow-green, secondary CTAs / badges */
  --ev-secondary:      #00C03B;  /* bright green, success / accent */
  --ev-accent:         #F3EC34;  /* yellow, highlights */
  --ev-accent-dark:    #EAE332;
  --ev-dark:           #1B4427;  /* deep forest green for headings + dark surfaces */
  --ev-success-soft:   #D1E2D8;  /* pastel mint for soft info / banners */
  --ev-text:           #0E1A11;  /* near-black with green tint */
  --ev-text-muted:     #6B7569;  /* muted grey-green for secondary copy */
  --ev-text-placeholder:#828282;
  --ev-bg:             #F3F3F1;  /* off-white page background */
  --ev-surface:        #FFFFFF;  /* cards, panels */
  --ev-surface-soft:   #F8FAF7;  /* secondary surfaces (input bg, hover) */
  --ev-border:         rgba(27, 68, 39, 0.10);
  --ev-border-strong:  rgba(27, 68, 39, 0.18);
  --ev-danger:         #C5612F;
  --ev-warn:           #D89B3E;

  /* === Typography === */
  --ev-font:           'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ev-font-serif:     Georgia, 'Times New Roman', serif;  /* sparingly, for editorial accents */

  /* === Spacing scale (matches evertreen.com) === */
  --ev-s-1: 5px;
  --ev-s-2: 8px;
  --ev-s-3: 10px;
  --ev-s-4: 15px;
  --ev-s-5: 20px;
  --ev-s-6: 30px;
  --ev-s-7: 40px;
  --ev-s-8: 50px;
  --ev-s-9: 75px;

  /* === Radius scale === */
  --ev-r-1: 5px;
  --ev-r-2: 10px;
  --ev-r-3: 15px;
  --ev-r-4: 20px;
  --ev-r-pill: 999px;

  /* === Shadows === */
  --ev-shadow-sm:  0 1px 2px rgba(27, 68, 39, 0.06);
  --ev-shadow-md:  0 4px 12px -4px rgba(27, 68, 39, 0.12);
  --ev-shadow-lg:  0 18px 38px -16px rgba(27, 68, 39, 0.22);
}

/* === Base scaffolding utility classes (opt-in, namespaced "ev-") === */
.ev-body {
  background: var(--ev-bg);
  color: var(--ev-text);
  font-family: var(--ev-font);
  font-size: 14px;
  line-height: 1.5;
}

.ev-surface {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-r-3);
  box-shadow: var(--ev-shadow-sm);
}

.ev-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--ev-r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  background: transparent;
  color: var(--ev-text);
}
.ev-btn:hover { background: var(--ev-surface-soft); }
.ev-btn:active { transform: translateY(1px); }

.ev-btn--primary {
  background: var(--ev-primary);
  color: #fff;
}
.ev-btn--primary:hover { background: #0a6b2c; color: #fff; }

.ev-btn--dark {
  background: var(--ev-dark);
  color: #fff;
}
.ev-btn--dark:hover { background: #0F2A18; color: #fff; }

.ev-btn--ghost {
  border-color: var(--ev-border-strong);
  color: var(--ev-text);
}
.ev-btn--ghost:hover {
  border-color: var(--ev-primary);
  color: var(--ev-primary);
  background: transparent;
}

.ev-input, .ev-textarea, .ev-select {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
  border-radius: var(--ev-r-2);
  border: 1px solid var(--ev-border);
  background: var(--ev-surface-soft);
  color: var(--ev-text);
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.ev-input:focus, .ev-textarea:focus, .ev-select:focus {
  outline: none;
  border-color: var(--ev-primary);
  background: var(--ev-surface);
}

.ev-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--ev-r-pill);
  background: var(--ev-primary-light);
  color: var(--ev-dark);
}
.ev-chip--accent { background: var(--ev-accent); color: var(--ev-dark); }
.ev-chip--mint   { background: var(--ev-success-soft); color: var(--ev-dark); }
.ev-chip--muted  { background: rgba(107,117,105,0.12); color: var(--ev-text-muted); }

.ev-link { color: var(--ev-primary); text-decoration: none; font-weight: 500; }
.ev-link:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ev-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ev-text-muted); }