/*
 * _base.css — brand-agnostic structural tokens + primitives.
 * Loaded on every brand. Brand themes (e.g. yondersim.css) override the
 * --c-* / --font-* tokens declared in :root here. Do NOT hardcode brand
 * colors in this file — only structure, scale, and component rules.
 */

:root {
  /* Color tokens — overridden per brand. Defaults are neutral fallbacks. */
  --c-forest-900: #16271d;
  --c-forest-800: #1e3a2c;
  --c-forest-700: #264a38;
  --c-forest-600: #33604a;
  --c-sage-400:   #8fa67b;
  --c-sage-300:   #a8bd95;
  --c-sand-100:   #f4efe4;
  --c-sand-200:   #e9e1d0;
  --c-clay-400:   #c9b89a;

  --c-ink-900:    #1f3a2d;
  --c-ink-600:    #3d5a43;
  --c-cream:      #f4efe2;
  --c-cream-dim:  #c4d4bf;
  --c-accent:     #e8a838;
  --c-success:    #3d7a4f;
  --c-warning:    #d98b3a;
  --c-danger:     #b5654a;
  --c-on-cta:     #f4efe2;

  /* Semantic aliases (components reference these, not raw colors) */
  --bg-app:       var(--c-sand-100);
  --bg-surface:   #ffffff;
  --bg-dark:      var(--c-forest-800);
  --surface-dark: var(--c-forest-700);
  --text:         var(--c-ink-900);
  --text-muted:   var(--c-ink-600);
  --text-on-dark: var(--c-cream);
  --cta-bg:       var(--c-forest-800);
  --cta-bg-hover: var(--c-forest-700);
  --cta-text:     var(--c-on-cta);
  --accent-bg:    var(--c-accent);
  --accent-text:  #2b2417;
  --border:       rgba(31, 58, 45, 0.14);
  --border-dark:  var(--c-forest-600);

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Archivo", system-ui, sans-serif;
  --fs-eyebrow: .75rem; --fs-body: 1rem; --fs-lg: 1.25rem;
  --fs-h3: 1.5rem; --fs-h2: 2rem; --fs-h1: 2.5rem; --fs-display: 3.5rem;
  --lh-body: 1.5; --lh-tight: 1.1;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* Radius / elevation / motion */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-card: 0 6px 24px rgba(22, 39, 29, 0.10);
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: 180ms;

  --container: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); font-weight: 700; margin: 0 0 var(--sp-4); }
h1 { font-size: var(--fs-h1); }
.display { font-size: var(--fs-display); letter-spacing: -0.02em; }
.eyebrow { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }

/* Primary CTA — the sage pill */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-6);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body);
  border: 0; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  background: var(--cta-bg); color: var(--cta-text);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--cta-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn--full { width: 100%; }
.btn--secondary { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn--ghost-dark { background: transparent; color: var(--text-on-dark); border: 1.5px solid var(--border-dark); }
.btn--accent { background: var(--accent-bg); color: var(--accent-text); box-shadow: 0 10px 26px rgba(232,168,56,.35); }
.btn--accent:hover { background: var(--accent-bg); filter: brightness(1.04); }

/* Card */
.card {
  background: var(--bg-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--sp-6);
}
.card--dark { background: var(--surface-dark); color: var(--text-on-dark); border: 1px solid var(--border-dark); box-shadow: none; }

/* Focus + reduced motion (a11y) */
:focus-visible { outline: 2px solid var(--c-sage-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }