/* src/styles/global.css */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:           #faf8f4;
  --bg-1:         #f4f0e8;
  --bg-2:         #ede8dd;
  --bg-card:      #ffffff;
  --border:       #e5dfd4;
  --border-2:     #d4cdc0;

  --text:         #1e1b17;
  --text-2:       #6b6458;
  --text-3:       #a09890;

  --green:        #2a7a5a;
  --green-light:  #e8f5ee;
  --green-mid:    #c0e0d0;

  --amber:        #b86b2a;
  --amber-light:  #fef3e8;
  --amber-mid:    #f5c99a;

  --red:          #c0392b;
  --red-light:    #fcecea;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

h1 { font-size: clamp(2.8rem, 5vw, 4.25rem); }
h2 { font-size: clamp(2rem, 3.5vw, 2.875rem); line-height: 1.15; }
h3 { font-size: 1.375rem; }

h1 em, h2 em {
  font-style: italic;
  color: var(--green);
}

/* Shared button styles */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  border: 1.5px solid var(--border-2);
  transition: border-color 0.2s, transform 0.15s;
}
.btn-outline:hover {
  border-color: var(--text-2);
  transform: translateY(-1px);
}

/* Shared section utilities */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--green);
  background: var(--green-light);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 1.25rem;
}

.section-lead {
  font-size: 1.0625rem;
  color: var(--text-2);
  max-width: 520px;
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 3.5rem;
}

/* Pill badges */
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
}
.pill-green { background: var(--green-light); color: var(--green); }
.pill-amber { background: var(--amber-light); color: var(--amber); }
.pill-red   { background: var(--red-light);   color: var(--red); }
.pill-muted { background: var(--bg-1);        color: var(--text-3); }

/* Health bars */
.hbar { display: flex; align-items: center; gap: 6px; }
.hbar-track {
  width: 52px; height: 5px;
  background: var(--bg-1);
  border-radius: 3px;
  overflow: hidden;
}
.hbar-fill { height: 100%; border-radius: 3px; }
.hbar-fill-green { background: var(--green); }
.hbar-fill-amber { background: var(--amber); }
.hbar-fill-red   { background: var(--red); }
.hbar-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Responsive */
@media (max-width: 960px) {
  .hide-mobile { display: none !important; }
}