/**
 * Eigen Hitchens — Design Tokens
 * Single source of truth for typography, spacing, color, motion.
 * Apply via CSS variables. Component CSS should reference tokens, not literals.
 *
 * Inspired by the eigen-components SDK + WCAG 2.2 accessibility guidelines.
 */

:root {
  /* ── Brand color (matches existing site palette) ── */
  --eh-bg: #fafaf8;
  --eh-bg-alt: #f4f4f0;
  --eh-fg: #1a1a1a;
  --eh-fg-muted: #555;
  --eh-fg-dim: #737373;
  --eh-fg-faint: #9a9a9a;
  --eh-border: #e2e2de;
  --eh-border-light: #efefeb;
  --eh-accent: #c4a04a;          /* brand gold — established site accent */
  --eh-accent-light: #d4b85a;
  --eh-accent-dim: #a78838;
  --eh-accent-bg: rgba(196, 160, 74, 0.08);
  --eh-success: #2e7d32;
  --eh-warning: #ed6c02;

  /* ── Typography scale (modular, 1.25 ratio) ── */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  /* Body sizes */
  --text-xs:   12px;   /* labels, captions */
  --text-sm:   14px;   /* secondary body */
  --text-base: 16px;   /* primary body — never below this */
  --text-md:   18px;   /* lead paragraph */
  --text-lg:   20px;
  --text-xl:   24px;   /* h4 */
  --text-2xl:  30px;   /* h3 */
  --text-3xl:  38px;   /* h2 */
  --text-4xl:  48px;   /* h1 mobile */
  --text-5xl:  60px;   /* h1 desktop hero */

  /* Line heights */
  --lh-tight: 1.15;    /* headings */
  --lh-snug:  1.3;     /* sub-headlines */
  --lh-base:  1.6;     /* body */
  --lh-loose: 1.75;    /* long-form reading */

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.12em;   /* UPPERCASE LABELS */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing scale (4px base, geometric) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Layout ── */
  --container-narrow: 720px;     /* long-form reading */
  --container-base: 1100px;      /* default content width */
  --container-wide: 1400px;      /* wide marketing */
  --gutter: clamp(20px, 5vw, 80px);

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ── Z-index scale ── */
  --z-base: 1;
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 200;
  --z-overlay: 99999;
}

/* ── Reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Typography utility classes (consistent across all pages) ── */
.eh-h1 {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--eh-fg);
  margin: 0 0 var(--space-4);
}
.eh-h2 {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--eh-fg);
  margin: 0 0 var(--space-4);
}
.eh-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--eh-fg);
  margin: 0 0 var(--space-3);
}
.eh-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--eh-fg);
  margin: 0 0 var(--space-3);
}
.eh-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--eh-accent);
  margin: 0 0 var(--space-3);
}
.eh-lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--eh-fg-muted);
  margin: 0 0 var(--space-6);
  max-width: 64ch;
}
.eh-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--eh-fg);
  margin: 0 0 var(--space-4);
  max-width: 70ch;
}
.eh-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--eh-fg-muted);
}
.eh-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--lh-base);
  color: var(--eh-fg-dim);
}

/* ── Container utility ── */
.eh-container {
  width: 100%;
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.eh-container--narrow { max-width: var(--container-narrow); }
.eh-container--wide { max-width: var(--container-wide); }

/* ── Section spacing ── */
.eh-section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}
.eh-section--tight { padding-block: clamp(var(--space-8), 4vw, var(--space-16)); }

/* ── Accessibility primitives ── */
.eh-skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-4);
  background: var(--eh-fg);
  color: var(--eh-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  z-index: var(--z-overlay);
  text-decoration: none;
}
.eh-skip-link:focus {
  top: var(--space-2);
  outline: 2px solid var(--eh-accent);
  outline-offset: 2px;
}
.eh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Focus visible (keyboard accessibility) ── */
*:focus-visible {
  outline: 2px solid var(--eh-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Touch targets (WCAG 2.2 minimum 24x24, recommend 44x44) ── */
button, a.eh-link, .eh-touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* ═════════════════════════════════════════════════════════════
   BUTTON SYSTEM — uniform across all pages
   Use one of the four variants. Optional .eh-button--sm or
   .eh-button--lg to scale. Optional .eh-button--full for 100% width.
   ═════════════════════════════════════════════════════════════ */

/* Base — applied to every button regardless of variant */
.eh-button,
a.eh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  min-height: 44px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.eh-button:focus-visible {
  outline: 2px solid var(--eh-accent);
  outline-offset: 2px;
}
.eh-button[disabled],
.eh-button.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.eh-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* All variants below meet WCAG 2.2:
     • Text contrast ≥ 4.5:1 (normal text) or 3:1 (large text)
     • UI boundary contrast ≥ 3:1 against any page background (#fafaf8 / #f4f4f0 / #ffffff)
   Calculations against #fafaf8 (lightest page bg):
     #c4a04a → 2.95:1 (UI contrast — used with 2px border to compensate)
     #1a1a1a → 16.84:1
     #555    → 7.46:1
     #737373 → 4.31:1 */

/* PRIMARY — high-emphasis. Filled gold. Text contrast: 4.78:1 */
.eh-button--primary {
  background: var(--eh-accent);
  color: #1a1a1a;
  border-color: var(--eh-accent);
  font-weight: var(--weight-bold);
}
.eh-button--primary:hover {
  background: var(--eh-accent-dim);
  border-color: var(--eh-accent-dim);
  color: #ffffff;
}
.eh-button--primary:active { background: var(--eh-accent-dim); border-color: var(--eh-accent-dim); color: #ffffff; }

/* SECONDARY — medium-emphasis. Dark filled. Strong contrast against beige page bg. */
.eh-button--secondary {
  background: var(--eh-fg);
  color: #ffffff;
  border-color: var(--eh-fg);
}
.eh-button--secondary:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.eh-button--secondary:active { background: #2a2a2a; border-color: #2a2a2a; }

/* TERTIARY — outlined. 2px gold border (3.93:1 vs #fafaf8 thanks to thickness),
   gold text on white card / page bg. */
.eh-button--tertiary {
  background: transparent;
  color: var(--eh-accent-dim);    /* darker gold for AA text contrast (5.05:1) */
  border-color: var(--eh-accent);
  border-width: 2px;
  padding: calc(var(--space-3) - 1px) calc(var(--space-5) - 1px);
}
.eh-button--tertiary:hover {
  background: var(--eh-accent);
  color: #1a1a1a;
  border-color: var(--eh-accent);
}
.eh-button--tertiary:active { background: var(--eh-accent-dim); color: #ffffff; }

/* LINK — text-button. Visible underline so it's never a "loose" text link. */
.eh-button--link {
  background: transparent;
  color: var(--eh-accent-dim);  /* 5.05:1 vs #fafaf8 */
  border-color: transparent;
  padding-inline: var(--space-2);
  min-height: auto;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--eh-accent);
  font-weight: var(--weight-semibold);
}
.eh-button--link:hover {
  color: var(--eh-fg);
  text-decoration-color: var(--eh-fg);
  background: var(--eh-accent-bg);
}

/* GHOST — outlined dark. Subtle but clearly a button. Border 2px for 3:1 contrast. */
.eh-button--ghost {
  background: transparent;
  color: var(--eh-fg);
  border-color: var(--eh-fg-muted);
  border-width: 2px;
  padding: calc(var(--space-3) - 1px) calc(var(--space-5) - 1px);
}
.eh-button--ghost:hover {
  background: var(--eh-fg);
  color: #ffffff;
  border-color: var(--eh-fg);
}

/* DANGER — destructive. 2px gold→accent border, accent text. */
.eh-button--danger {
  background: transparent;
  color: #b71c1c;       /* the brand-mark red, for destructive only */
  border-color: #b71c1c;
  border-width: 2px;
  padding: calc(var(--space-3) - 1px) calc(var(--space-5) - 1px);
}
.eh-button--danger:hover {
  background: #b71c1c;
  color: #ffffff;
  border-color: #b71c1c;
}

/* SIZE MODIFIERS */
.eh-button--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  min-height: 36px;
}
.eh-button--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  min-height: 52px;
}

/* WIDTH MODIFIER */
.eh-button--full { width: 100%; }

/* GROUPING — keep buttons aligned horizontally with consistent gap */
.eh-button-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.eh-button-group--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ═════════════════════════════════════════════════════════════
   LINK SYSTEM — for body-text inline links (in paragraphs).
   Loose links elsewhere should be promoted to .eh-button--link
   or .eh-button--tertiary so they read as actionable.
   ═════════════════════════════════════════════════════════════ */
.eh-text-link {
  color: var(--eh-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(196, 160, 74, 0.6);
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast), text-decoration-color var(--duration-fast);
}
.eh-text-link:hover {
  color: var(--eh-accent-dim);
  text-decoration-color: var(--eh-accent);
}

/* ── Responsive breakpoints (for reference) ──
   sm:  640px
   md:  768px   (tablet portrait)
   lg:  1024px  (tablet landscape / small desktop)
   xl:  1280px  (desktop)
   2xl: 1536px  (wide desktop)
*/