/*
  Copied verbatim from Resources/design-system.css on 2026-07-14
  for the Mycelium marketing site. Tokens only (colors, fonts,
  spacing, radii) are used by marketing.css — the dashboard
  component classes below (.card, .badge, .tabs, etc.) are not
  used on this page. Re-sync this file if the source changes.
  ============================================================
*/

/*
  ============================================================
  DESIGN SYSTEM — Kevin Hollingsworth / EDI
  ============================================================
  Drop this file into any project and import it at the top of
  your HTML or CSS entry point:

    <link rel="stylesheet" href="design-system.css">

  When prompting Claude Code, say:
    "Use design-system.css for all styling. Do not introduce
     new colors, fonts, or border-radius values — pull
     everything from the tokens in that file."

  Contents:
    1. Google Fonts
    2. Brand tokens (CSS custom properties)
    3. Base reset + typography
    4. Cards
    5. Badges
    6. Progress bars
    7. Metric cards
    8. Tabs
    9. Avatars
   10. Section labels + utility classes
  ============================================================
*/


/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400&family=DM+Sans:wght@400;500&display=swap');


/* ============================================================
   2. BRAND TOKENS
   ============================================================
   These are the only colors, fonts, and radii in the system.
   Never hardcode hex values outside this block.
   ============================================================ */
:root {

  /* Brand palette */
  --grove:      #1A3D2A;   /* Primary. Hero backgrounds, CTAs, active states, dark sections. */
  --parchment:  #FAF7F2;   /* Main background. Page base, light card surfaces. */
  --linen:      #F0EDE6;   /* Secondary surface. Card fills, alternate row backgrounds. */
  --espresso:   #2C2419;   /* Primary text. Headlines and body copy. */
  --driftwood:  #8B7355;   /* Secondary text. Labels, metadata, captions, muted copy. */
  --grain:      #C9B99E;   /* Warm accent. Borders, dividers, CTAs on Grove. */

  /* Semantic status colors */
  --green-bg:   #EAF3DE;
  --green-text: #3B6D11;
  --amber-bg:   #FAEEDA;
  --amber-text: #854F0B;
  --red-bg:     #FCEBEB;
  --red-text:   #A32D2D;

  /* Typography */
  --font-serif: 'Lora', Georgia, serif;          /* Section headers, dashboard titles */
  --font-sans:  'DM Sans', system-ui, sans-serif; /* All UI text, labels, body copy */

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;

  /* Border radius */
  --radius-sm:  6px;   /* Badges, small pills */
  --radius-md:  8px;   /* Metric cards, inputs, buttons */
  --radius-lg:  10px;  /* Main cards, panels */

  /* Borders */
  --border: 1px solid var(--grain);
  --border-light: 1px solid rgba(201, 185, 158, 0.4);
}


/* ============================================================
   3. BASE RESET + TYPOGRAPHY
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--espresso);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

/* Headings use serif at 400 weight — the font does the work, not the weight */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--espresso);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p {
  color: var(--espresso);
  line-height: 1.65;
}

/* Muted text utility */
.text-muted {
  color: var(--driftwood);
}

/* Uppercase label utility */
.label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--driftwood);
}


/* ============================================================
   4. CARDS
   ============================================================
   Two card variants:
   .card         — main card (white/parchment bg, border, shadow-free)
   .card-surface — secondary card (linen bg, same border)

   Usage:
   <div class="card">...</div>
   <div class="card-surface">...</div>
   ============================================================ */
.card {
  background: var(--parchment);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
}

.card-surface {
  background: var(--linen);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
}

/* Card header row — flex row for title + action/badge */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

/* Card divider */
.card-divider {
  border: none;
  border-top: var(--border);
  margin: var(--space-md) 0;
}

/* Dark card — Grove background, light text */
.card-dark {
  background: var(--grove);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--parchment);
}

.card-dark h1,
.card-dark h2,
.card-dark h3,
.card-dark p {
  color: var(--parchment);
}

.card-dark .label {
  color: var(--grain);
}


/* ============================================================
   5. BADGES
   ============================================================
   Status indicators. Use .badge as the base class plus one
   modifier for color meaning.

   Usage:
   <span class="badge badge-green">On track</span>
   <span class="badge badge-amber">At risk</span>
   <span class="badge badge-red">Behind</span>
   <span class="badge badge-neutral">Steady</span>
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 1.4;
}

.badge-green {
  background: var(--green-bg);
  color: var(--green-text);
}

.badge-amber {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.badge-red {
  background: var(--red-bg);
  color: var(--red-text);
}

/* Neutral — for non-status labels */
.badge-neutral {
  background: var(--linen);
  color: var(--driftwood);
  border: var(--border-light);
}

/* Grove badge — for primary CTAs or featured items on light bg */
.badge-grove {
  background: var(--grove);
  color: var(--grain);
}


/* ============================================================
   6. PROGRESS BARS
   ============================================================
   Horizontal progress bar with status color fill.

   Usage:
   <div class="progress">
     <div class="progress-fill progress-green" style="width: 88%"></div>
   </div>

   Or use inline width for dynamic values from JS:
   element.style.width = pct + '%';
   ============================================================ */
.progress {
  height: 5px;
  background: var(--grain);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease;
}

.progress-green  { background: var(--green-text); }
.progress-amber  { background: var(--amber-text); }
.progress-red    { background: var(--red-text);   }
.progress-grove  { background: var(--grove);      }


/* ============================================================
   7. METRIC CARDS
   ============================================================
   Compact stat tiles for dashboards. Grid-ready.

   Usage:
   <div class="metric-grid">
     <div class="metric-card">
       <div class="metric-label">Emails sent</div>
       <div class="metric-value">847</div>
     </div>
   </div>
   ============================================================ */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-sm);
}

.metric-card {
  background: var(--linen);
  border-radius: var(--radius-md);
  padding: 11px var(--space-md);
}

.metric-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--driftwood);
  margin-bottom: var(--space-xs);
}

.metric-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.1;
}

/* Status modifiers for metric values */
.metric-value.positive { color: var(--green-text); }
.metric-value.negative { color: var(--red-text);   }
.metric-value.warning  { color: var(--amber-text); }


/* ============================================================
   8. TABS
   ============================================================
   Underline-style tab navigation.

   Usage:
   <div class="tabs">
     <button class="tab-btn active" onclick="...">Activity</button>
     <button class="tab-btn" onclick="...">Coaching</button>
   </div>
   ============================================================ */
.tabs {
  display: flex;
  border-bottom: var(--border);
  margin-bottom: var(--space-lg);
}

.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-sm) 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--driftwood);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.tab-btn.active {
  color: var(--grove);
  border-bottom-color: var(--grove);
}

.tab-btn:hover:not(.active) {
  color: var(--espresso);
}

/* Tab content panels */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}


/* ============================================================
   9. AVATARS
   ============================================================
   Initials-based circular avatars. Four brand-color variants.

   Usage:
   <div class="avatar av-grove">MA</div>
   ============================================================ */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

/* Variants — cycles through brand palette */
.av-grove      { background: var(--grove);     color: var(--grain);     }
.av-driftwood  { background: var(--driftwood); color: var(--parchment); }
.av-espresso   { background: var(--espresso);  color: var(--grain);     }
.av-grain      { background: var(--grain);     color: var(--espresso);  }

/* Size modifiers */
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }


/* ============================================================
   10. SECTION LABELS + UTILITY CLASSES
   ============================================================ */

/* Small uppercase label above a section or field */
.section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--driftwood);
  margin-bottom: 3px;
}

/* Expandable section toggle button */
.expand-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-top: var(--border);
  padding: 10px var(--space-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--driftwood);
  text-align: left;
}

.expand-btn:hover {
  background: rgba(201, 185, 158, 0.15);
}

.expand-icon {
  transition: transform 0.2s;
  font-size: 13px;
}

.expand-icon.open {
  transform: rotate(180deg);
}

.expand-content {
  display: none;
  padding: var(--space-lg);
  background: rgba(201, 185, 158, 0.08);
  border-top: var(--border);
}

.expand-content.open {
  display: block;
}

/* Two-column layout utility */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

/* Flex row with gap */
.flex-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Period/meta label (top right of dashboard header) */
.period-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--driftwood);
}

/* Input + button base styles */
input[type="text"],
input[type="email"],
textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--espresso);
  background: var(--parchment);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 9px var(--space-md);
  outline: none;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--grove);
}

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 9px 18px;
  background: var(--grove);
  color: var(--parchment);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-primary:hover   { opacity: 0.88; }
.btn-primary:active  { opacity: 0.75; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Ghost button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 16px;
  background: none;
  color: var(--espresso);
  border: var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-ghost:hover { background: var(--linen); }