/* ============================================================================
   madebyotten.com — Aspire v2 brand base
   Mirror of sites/command-center/src/styles/global.css v2 tokens (light only).
   v2 locked 2026-04-16 by Vegas. Mirrored to public 2026-05-29 by Aria.
   Canonical source: https://docs.madebyaspire.com/aspiredigital/design-library/
   ----------------------------------------------------------------------------
   ADA / WCAG 2.1 AA contract:
   - --text on --bg                = 16.34:1 ✓ AAA
   - --text-sec (#666) on --bg     = 5.41:1  ✓ AA
   - --text-muted (#595959) on --bg= 6.96:1  ✓ AAA
   - --terra-dark on --bg          = 5.73:1  ✓ AA  (use for body links + small text)
   - --hunter on --bg              = 7.12:1  ✓ AAA (use for CTA backgrounds w/ white text)
   - white on --hunter             = 7.12:1  ✓ AAA
   - white on --terra              = 4.51:1  ✓ AA  (LARGE TEXT ONLY ≥18pt, or 14pt+bold)
   --terra (#C4622D) is decorative + large only. NEVER use as small text on white.
   ============================================================================ */

/* Google Fonts FIRST — CSS spec requires @import before any other rules */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&family=EB+Garamond:ital,wght@1,400;1,600&family=Unbounded:wght@700;900&display=swap');

:root {
  /* ── Colors (light only — public pages don't ship dark mode) ───────────── */
  --bg:           #FAF0E2;   /* warm cream canvas */
  --bg-alt:       #F2EDE6;   /* surface, alt card */
  --bg-card:      #FFFFFF;   /* card surface */
  --bg-dark:      #2B2D2B;   /* dark section / footer */
  --bg-night:     #1A1A1A;   /* deepest surfaces */
  --text:         #1A1A1A;   /* primary body */
  --text-sec:     #666666;   /* captions, meta */
  --text-muted:   #595959;   /* ADA-safe muted */
  --terra:        #C4622D;   /* terracotta — large text only (≥18pt) */
  --terra-dark:   #A34E1A;   /* body links, hover — 5.73:1 on cream */
  --hunter:       #2D5940;   /* primary CTA — 7.12:1 on cream */
  --forest:       #4A7B5A;   /* icons, tags — on white only */
  --sage:         #8FAF8A;   /* decorative atmosphere — NEVER text */
  --charcoal:     #1E1E1E;   /* logo, deep elements */
  --white:        #FFFFFF;
  --border:       #E5E5E5;
  --border-light: #F0F0F0;
  --border-warm:  #E2D8CE;   /* warm border for cream surfaces */
  --danger:       #A33333;
  --success:      #15803D;
  --warning:      #B45309;

  /* Aliases */
  --accent:      var(--terra);
  --accent-dark: var(--terra-dark);
  --cta:         var(--hunter);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-accent:  'EB Garamond', Georgia, serif;
  --font-num:     'Unbounded', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', ui-monospace, monospace;

  --text-hero:    clamp(40px, 7vw, 88px);
  --text-section: clamp(1.75rem, 4vw, 2.5rem);   /* h2 */
  --text-card:    clamp(1.375rem, 3vw, 1.75rem); /* h3 */
  --text-h4:      1.375rem;
  --text-h5:      1.125rem;
  --text-lead:    clamp(1.0625rem, 1.6vw, 1.25rem);
  --text-body:    1.0625rem;
  --text-small:   0.875rem;
  --text-label:   0.75rem;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --space-section:   clamp(48px, 9vw, 96px);
  --space-card:      clamp(20px, 4vw, 32px);
  --space-grid:      clamp(16px, 3vw, 24px);
  --space-component: 16px;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadow tiers ───────────────────────────────────────────────────── */
  --shadow-subtle: 0 1px 4px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04);
  --shadow-medium: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-strong: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out-soft:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-elastic:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.22s ease;
  --transition-med:  0.25s ease-out;
  --transition-slow: 0.45s var(--ease-out-soft);

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --content-max:    1200px;
  --content-narrow: 720px;
  --content-reading: 68ch;
}

/* ── Universal reset ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--terra-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
a:hover,
a:focus-visible {
  color: var(--hunter);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--hunter);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--terra);
  color: var(--white);
}

/* ── Skip link (a11y) ──────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--hunter);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 16px;
  color: var(--white);
}

/* ── Visually hidden (screen reader only) ──────────────────────────────── */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Container ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.container--narrow { max-width: var(--content-narrow); }
.container--reading { max-width: var(--content-reading); }

/* ── Typography helpers ────────────────────────────────────────────────── */
.h-display {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
}
.h-section {
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}
.h-card {
  font-family: var(--font-display);
  font-size: var(--text-card);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
}
.lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terra-dark);
  margin-bottom: 12px;
}
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.eyebrow-pill .dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--hunter);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 44px;
}
.btn--primary {
  background: var(--hunter);
  color: var(--white);
  border-color: var(--hunter);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #234731;
  border-color: #234731;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--white);
  border-color: var(--text);
  color: var(--text);
  transform: translateY(-1px);
}
.btn--accent {
  background: var(--white);
  color: var(--terra-dark);
  border-color: var(--terra-dark);
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--terra-dark);
  color: var(--white);
  border-color: var(--terra-dark);
  transform: translateY(-1px);
}
.btn--small {
  padding: 10px 18px;
  font-size: 0.9rem;
  min-height: 36px;
}

/* ── Surface variants ─────────────────────────────────────────────────── */
.surface-dark {
  background: var(--bg-dark);
  color: var(--white);
}
.surface-dark a {
  color: #F2A576; /* lightened terra-dark for AA on dark canvas */
}
.surface-dark a:hover,
.surface-dark a:focus-visible {
  color: #76B98D; /* lightened hunter */
}
.surface-dark .muted {
  color: #CFCFC8;
}

.surface-alt {
  background: var(--bg-alt);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* ── Prose (long-form content) ────────────────────────────────────────── */
.prose {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text);
}
.prose > * + * { margin-top: 1em; }
.prose h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 0.4em;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: 1.2;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-card);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
.prose h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}
.prose p, .prose ul, .prose ol, .prose blockquote {
  font-size: var(--text-body);
  line-height: 1.7;
}
.prose ul, .prose ol {
  padding-inline-start: 1.5em;
}
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  border-inline-start: 3px solid var(--terra-dark);
  padding-inline-start: 1.2em;
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--text-muted);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.prose pre {
  font-family: var(--font-mono);
  background: var(--bg-night);
  color: #F5F5F2;
  padding: 1.25em 1.5em;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}
.prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.prose hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin-block: 2em;
}
.prose strong { font-weight: 700; color: var(--text); }
.prose em { font-style: italic; }
.prose a {
  color: var(--terra-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover,
.prose a:focus-visible {
  color: var(--hunter);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-dark);
  color: var(--white);
  padding: 48px 0;
  margin-top: var(--space-section);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer .footer-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
}
.site-footer .footer-brand a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
}
.site-footer .footer-brand a:hover,
.site-footer .footer-brand a:focus-visible {
  color: var(--white);
  border-bottom-color: var(--white);
}
.site-footer .footer-meta {
  font-size: 0.875rem;
  color: #CFCFC8;
}

/* ── Print-safe ────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
}