/* =====================================================
   CSS CUSTOM PROPERTIES
===================================================== */
:root {
  --charcoal:      #1b1b19;
  --sage:          #627d70;
  --sage-dark:     #4a6358;
  --sage-10:       rgba(98, 125, 112, 0.10);
  --sage-12:       rgba(98, 125, 112, 0.12);
  --sage-30:       rgba(98, 125, 112, 0.30);
  --purple:        #553f5b;
  --purple-light:  #6b5273;
  --purple-8:      rgba(85, 63, 91, 0.08);
  --slate:         #334155;
  --off-white:     #f9fafb;
  --white:         #ffffff;
  --border:        #e2e8f0;
  --muted:         #94a3b8;
  --light-gray:    #cbd5e1;
  --amber:         #d97706;
  --amber-12:      rgba(217, 119, 6, 0.12);
  --amber-25:      rgba(217, 119, 6, 0.25);
  --red:           #dc2626;
  --streak-orange: #ea580c;
  --font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =====================================================
   RESET & BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--charcoal);
}

/* =====================================================
   UTILITY
===================================================== */
.hidden { display: none !important; }

.spacer { height: 80px; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 0 16px 14px;
}