/*
 * HypTide site chrome (T1, 2): tokens, shared header and footer, legal pages.
 * Loaded on every page. The landing sections have their own landing.css
 * (front page only). Token values from design/tokens.css (light theme), the
 * same values the landing uses under #landing. Header and footer markup and
 * rules come from landing v3 (ht-header, ht-footer), renamed to ht-site-*.
 */

/* ---- Tokens ---- */
:root {
  --ht-bg: #FAF8F5;
  --ht-surface: #FFFFFF;
  --ht-surface-muted: #F2F6F3;
  --ht-border: #E7E5E4;
  --ht-text: #1C1917;
  --ht-text-muted: #57534E;
  --ht-action: #047857;
  --ht-action-hover: #065F46;
  --ht-on-action: #FFFFFF;
  --ht-accent: #10B981;
  --ht-accent-2: #0F766E;
  --ht-focus: #047857;
  --ht-font-sans: "HT Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ht-font-serif: "HT Newsreader", "Newsreader", Georgia, "Times New Roman", serif;
  --ht-text-14: 0.875rem; --ht-text-16: 1rem; --ht-text-18: 1.125rem; --ht-text-20: 1.25rem;
  --ht-text-24: 1.5rem; --ht-text-32: 2rem; --ht-text-44: 2.75rem;
  --ht-leading-text: 1.6; --ht-leading-title: 1.15; --ht-tracking-title: -0.01em;
  --ht-measure: 50ch;
  --ht-space-1: 4px; --ht-space-2: 8px; --ht-space-3: 12px; --ht-space-4: 16px; --ht-space-5: 24px;
  --ht-space-6: 32px; --ht-space-7: 48px; --ht-space-8: 64px; --ht-space-9: 96px;
  --ht-section-y: 64px; --ht-container: 1120px; --ht-column: 760px; --ht-gutter: 24px;
  --ht-radius-full: 999px;
  --ht-focus-width: 2px; --ht-focus-offset: 2px;
  --ht-duration-fast: 160ms;
  --ht-ease: cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 768px) { :root { --ht-section-y: 96px; } }
@media (prefers-reduced-motion: reduce) { :root { --ht-duration-fast: 0ms; } }

body { background: var(--ht-bg); color: var(--ht-text); font-family: var(--ht-font-sans); }

/* ---- Shared pieces (same rules as #landing in v3) ---- */
.ht-site .ht-container { max-width: var(--ht-container); margin: 0 auto; padding: 0 var(--ht-gutter); box-sizing: border-box; }
.ht-site :focus-visible { outline: var(--ht-focus-width) solid var(--ht-focus); outline-offset: var(--ht-focus-offset); }
.ht-site a { font-family: var(--ht-font-sans); }

.ht-site .ht-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ht-space-2);
  min-height: 48px; padding: 0 var(--ht-space-5); box-sizing: border-box;
  border-radius: var(--ht-radius-full);
  font-family: var(--ht-font-sans); font-size: var(--ht-text-16); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: normal;
  transition: background-color var(--ht-duration-fast) var(--ht-ease), color var(--ht-duration-fast) var(--ht-ease), border-color var(--ht-duration-fast) var(--ht-ease);
}
.ht-site .ht-button--outline { background: transparent; color: var(--ht-action); border: 1px solid var(--ht-action); }
.ht-site .ht-button--outline:hover { background: var(--ht-surface-muted); color: var(--ht-action-hover); border-color: var(--ht-action-hover); }
.ht-site .ht-button--sm { min-height: 44px; padding: 0 var(--ht-space-5); font-size: var(--ht-text-16); }

/* ---- Header (v3 .ht-header) ---- */
.ht-site-header { position: relative; z-index: 2; background: transparent; }
.ht-site-header__inner { display: flex; justify-content: space-between; align-items: center; min-height: 72px; }
.ht-site .ht-wordmark {
  font-family: var(--ht-font-sans); font-weight: 600; font-size: var(--ht-text-20); letter-spacing: -0.01em;
  text-decoration: none; color: var(--ht-action);   /* one colour (brief v1.3), no gradient */
  display: inline-flex; align-items: center; min-height: 44px;
}
.ht-site .ht-wordmark:hover { color: var(--ht-action-hover); }
.ht-site-header__action { margin-left: var(--ht-space-4); }
/* Front page: the header lies over the hero, so the hero light runs behind it
   as in v3, where the header sat inside the hero section. landing.css adds the
   72 px back to the hero. */
.home .ht-site-header { position: absolute; top: 0; left: 0; right: 0; }

/* ---- Footer (v3 .ht-footer) ---- */
.ht-site-footer { border-top: 1px solid var(--ht-border); background: var(--ht-bg); }
.ht-site-footer__inner { padding-top: var(--ht-space-6); padding-bottom: var(--ht-space-6); display: flex; flex-direction: column; gap: var(--ht-space-3); }
.ht-site-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--ht-space-5); margin: 0; padding: 0; list-style: none; }
.ht-site-footer__links li { margin: 0; padding: 0; }
.ht-site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: var(--ht-text-16); color: var(--ht-text); text-decoration: none; }
.ht-site-footer__links a:hover { color: var(--ht-action-hover); text-decoration: underline; }
.ht-site-footer__copy { margin: 0; font-size: var(--ht-text-14); color: var(--ht-text-muted); }
@media (min-width: 768px) {
  .ht-site-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---- 404 and other theme pages: keep the Hello content inside the column ---- */
.ht-site-main { max-width: var(--ht-container); margin: 0 auto; padding: var(--ht-space-7) var(--ht-gutter); box-sizing: border-box; }

/* ---- Legal pages (T1, 4): text from legal/*.html, typography in tokens ---- */
.ht-main--legal { padding: var(--ht-space-7) var(--ht-gutter) var(--ht-section-y); box-sizing: border-box; }
.ht-legal { max-width: var(--ht-column); margin: 0 auto; font-family: var(--ht-font-sans); font-size: var(--ht-text-16); line-height: var(--ht-leading-text); color: var(--ht-text); overflow-wrap: anywhere; }
.ht-legal :where(h1, h2, h3, h4) {
  font-family: var(--ht-font-serif); font-weight: 400; color: var(--ht-text);
  line-height: var(--ht-leading-title); letter-spacing: var(--ht-tracking-title); text-wrap: balance;
  margin: var(--ht-space-7) 0 var(--ht-space-3); scroll-margin-top: var(--ht-space-5);
}
.ht-legal h1 { font-size: clamp(var(--ht-text-32), 1.4rem + 1.6vw, var(--ht-text-44)); margin-top: 0; }
.ht-legal h2 { font-size: var(--ht-text-24); font-weight: 500; }
.ht-legal :where(h3, h4) { font-size: var(--ht-text-20); font-weight: 500; margin-top: var(--ht-space-6); }
.ht-legal :where(p, ul, ol) { margin: 0 0 var(--ht-space-4); font-family: inherit; color: inherit; }
.ht-legal :where(ul, ol) { padding-left: var(--ht-space-5); }
.ht-legal :where(ul, ol) :where(ul, ol) { margin: var(--ht-space-2) 0 0; }
.ht-legal li { margin: 0 0 var(--ht-space-2); }
.ht-legal strong { font-weight: 600; }
.ht-legal a { color: var(--ht-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ht-legal a:hover { color: var(--ht-action-hover); }
.ht-legal hr { border: 0; border-top: 1px solid var(--ht-border); margin: var(--ht-space-6) 0; }