/* BOQ Brand A - TRUST design tokens
 * Forest + cream + serif. Bell-rival, Beanfield-comparable.
 * Import: <link rel="stylesheet" href="../_brand-trust/brand-trust.css">
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
  /* Color */
  --boq-trust-forest: #1F3A2E;
  --boq-trust-forest-deep: #15281F;
  --boq-trust-cream: #F5EFE0;
  --boq-trust-bone: #FBF7EC;
  --boq-trust-amber: #C8893D;
  --boq-trust-ink: #1A1614;
  --boq-trust-ink-muted: #5A5247;
  --boq-trust-border: #D8CFB8;
  --boq-trust-success: #3F6B4A;
  --boq-trust-danger: #9B2A22;

  /* Typography */
  --boq-trust-font-display: 'Fraunces', Georgia, serif;
  --boq-trust-font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --boq-trust-h1: clamp(2.75rem, 5vw + 1rem, 4.5rem);
  --boq-trust-h2: clamp(2rem, 2.5vw + 1rem, 2.5rem);
  --boq-trust-h3: 1.375rem;
  --boq-trust-body: 1.0625rem;
  --boq-trust-small: 0.875rem;

  /* Spacing (4px base, 8 stops) */
  --boq-trust-space-1: 4px;
  --boq-trust-space-2: 8px;
  --boq-trust-space-3: 12px;
  --boq-trust-space-4: 16px;
  --boq-trust-space-5: 24px;
  --boq-trust-space-6: 32px;
  --boq-trust-space-7: 48px;
  --boq-trust-space-8: 80px;

  /* Radii */
  --boq-trust-radius-sm: 4px;
  --boq-trust-radius-md: 8px;
  --boq-trust-radius-lg: 14px;
  --boq-trust-radius-xl: 24px;

  /* Shadow */
  --boq-trust-shadow-1: 0 1px 2px rgba(21, 40, 31, 0.06), 0 1px 1px rgba(21, 40, 31, 0.04);
  --boq-trust-shadow-2: 0 6px 16px rgba(21, 40, 31, 0.08), 0 2px 4px rgba(21, 40, 31, 0.05);
  --boq-trust-shadow-3: 0 24px 48px rgba(21, 40, 31, 0.14), 0 8px 16px rgba(21, 40, 31, 0.08);

  /* Motion */
  --boq-trust-dur-fast: 140ms;
  --boq-trust-dur-base: 240ms;
  --boq-trust-dur-slow: 480ms;
  --boq-trust-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --boq-trust-ease-emphasis: cubic-bezier(0.3, 0.0, 0.0, 1.0);
  --boq-trust-ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--boq-trust-font-body);
  font-size: var(--boq-trust-body);
  line-height: 1.6;
  color: var(--boq-trust-ink);
  background: var(--boq-trust-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  font-family: var(--boq-trust-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--boq-trust-ink);
  margin: 0 0 var(--boq-trust-space-5);
  line-height: 1.05;
}
h1 { font-size: var(--boq-trust-h1); }
h2 { font-size: var(--boq-trust-h2); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
h3 {
  font-family: var(--boq-trust-font-body);
  font-size: var(--boq-trust-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--boq-trust-space-3);
}

p { margin: 0 0 var(--boq-trust-space-4); }
a { color: var(--boq-trust-forest); text-decoration-color: var(--boq-trust-amber); text-underline-offset: 4px; }
a:hover { color: var(--boq-trust-forest-deep); }

.boq-eyebrow {
  font-family: var(--boq-trust-font-body);
  font-size: var(--boq-trust-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boq-trust-amber);
  margin-bottom: var(--boq-trust-space-4);
}

.boq-numeral {
  font-family: var(--boq-trust-font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.boq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--boq-trust-space-2);
  padding: 14px 24px;
  font-family: var(--boq-trust-font-body);
  font-size: var(--boq-trust-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--boq-trust-radius-md);
  cursor: pointer;
  transition: transform var(--boq-trust-dur-fast) var(--boq-trust-ease-standard),
              background-color var(--boq-trust-dur-fast) var(--boq-trust-ease-standard),
              box-shadow var(--boq-trust-dur-fast) var(--boq-trust-ease-standard);
}
.boq-btn--primary { background: var(--boq-trust-forest); color: var(--boq-trust-cream); }
.boq-btn--primary:hover { background: var(--boq-trust-forest-deep); box-shadow: var(--boq-trust-shadow-2); transform: translateY(-1px); }
.boq-btn--secondary { background: var(--boq-trust-cream); color: var(--boq-trust-forest); border: 1px solid var(--boq-trust-forest); }
.boq-btn--secondary:hover { background: var(--boq-trust-bone); border-width: 1.5px; }
.boq-btn--ghost { background: transparent; color: var(--boq-trust-forest); padding: 14px 8px; }
.boq-btn--ghost:hover { color: var(--boq-trust-amber); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.boq-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Cards */
.boq-card {
  background: var(--boq-trust-bone);
  border: 1px solid var(--boq-trust-border);
  border-radius: var(--boq-trust-radius-lg);
  padding: var(--boq-trust-space-6);
  box-shadow: var(--boq-trust-shadow-1);
}
.boq-card--elevated { border: 0; box-shadow: var(--boq-trust-shadow-2); transition: box-shadow var(--boq-trust-dur-base) var(--boq-trust-ease-standard); }
.boq-card--elevated:hover { box-shadow: var(--boq-trust-shadow-3); }
.boq-card--outlined { background: transparent; border: 1.5px solid var(--boq-trust-forest); box-shadow: none; }

/* Surfaces */
.boq-surface--forest { background: var(--boq-trust-forest); color: var(--boq-trust-cream); }
.boq-surface--forest h1, .boq-surface--forest h2, .boq-surface--forest h3 { color: var(--boq-trust-cream); }
.boq-surface--paper {
  background-color: var(--boq-trust-cream);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.23 0 0 0 0 0.18 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* Reveal */
.boq-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--boq-trust-dur-slow) var(--boq-trust-ease-emphasis), transform var(--boq-trust-dur-slow) var(--boq-trust-ease-emphasis); }
.boq-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}