/* HTG colors_and_type.css — single source of truth
   Imported from the Claude Design project "Foundation Site".
   Mirrors the Shopify theme, reconciled with #BC133E as the brand CTA red. */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Industry";
  src: url("fonts/Industry_Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* === Color: brand === */
  --htg-ink:         #0A0A0A;
  --htg-ink-2:       #141414;
  --htg-ink-3:       #1F1F1F;
  --htg-paper:       #F4F2EE;
  --htg-paper-2:     #ECE8E1;
  --htg-paper-3:     #DDD8CE;

  --htg-red:         #BC133E;   /* primary CTA */
  --htg-red-hover:   #9A0E32;   /* press / hover-down */
  --htg-red-focus:   #E2284E;   /* focus ring / hover-up */
  --htg-red-soft:    #FCE7EC;   /* soft red surface */

  --htg-wine:        #2A0810;
  --htg-wine-2:      #1A0508;
  --htg-junior:      #FF6B9D;
  --htg-junior-2:    #E04A85;
  --htg-flag:        #FFB800;

  /* === Color: neutrals === */
  --htg-mute:        #6B6B6B;
  --htg-mute-2:      #9A9A9A;
  --htg-line:        #C9C2B4;
  --htg-line-soft:   #E2DED5;
  --htg-line-dark:   #1F1F1F;

  /* === Type families === */
  --ff-headline: "Industry", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ff-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === Type scale (fluid clamps) === */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  clamp(1.5rem, 1rem + 1.5vw, 2rem);
  --fs-2xl: clamp(2rem, 1.25rem + 2.5vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  --fs-display: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* === Spacing — strict 4px grid === */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* === Radii === */
  --radius:     4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06);
  --shadow:    0 6px 20px rgba(10,10,10,.08);
  --shadow-lg: 0 24px 60px rgba(10,10,10,.18);

  /* === Motion === */
  --t-fast: 160ms;
  --t-med:  280ms;
  --t-slow: 600ms;
  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* === Layout === */
  --header-h: 64px;
  --container: 1280px;
  --container-narrow: 1100px;
  --container-wide: 1480px;
  --gutter: clamp(16px, 2.5vw, 40px);
}

/* ============================================================
   Semantic styles
   ============================================================ */

/* --- Headings --- */
.h-display {
  font-family: var(--ff-headline);
  font-weight: 900;
  font-size: var(--fs-display);
  letter-spacing: -.02em;
  line-height: .92;
  text-transform: uppercase;
}
.h-1 { font-family: var(--ff-headline); font-weight: 900; font-size: var(--fs-3xl); letter-spacing: -.015em; line-height: 1.0; text-transform: uppercase; }
.h-2 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-2xl); letter-spacing: -.025em; line-height: 1.10; }
.h-3 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-xl);  letter-spacing: -.020em; line-height: 1.15; }
.h-4 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-lg);  letter-spacing: -.015em; line-height: 1.20; }

.lede { font-family: var(--ff-body); font-size: var(--fs-lg); line-height: 1.5; color: var(--htg-ink); }
.body { font-family: var(--ff-body); font-size: var(--fs-md); line-height: 1.6; color: var(--htg-ink); }
.muted { color: var(--htg-mute); }

/* --- Eyebrow & tracker --- */
.eyebrow {
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--htg-red);
  display: inline-block;
}
.eyebrow--mute { color: var(--htg-mute); }
.eyebrow--paper { color: var(--htg-paper); }

.tracker {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--htg-mute);
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0 var(--s-6);
  min-height: 52px;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform 80ms;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--htg-red-focus); outline-offset: 3px; }

.btn--red   { background: var(--htg-red); color: #fff; }
.btn--red:hover { background: var(--htg-red-hover); }
.btn--ink   { background: var(--htg-ink); color: var(--htg-paper); }
.btn--ink:hover { background: var(--htg-ink-3); }
.btn--paper { background: var(--htg-paper); color: var(--htg-ink); border-color: var(--htg-paper-3); }
.btn--paper:hover { background: var(--htg-ink); color: var(--htg-paper); border-color: var(--htg-ink); }
.btn--ghost { background: transparent; color: var(--htg-ink); border-color: var(--htg-ink); }
.btn--ghost:hover { background: var(--htg-ink); color: var(--htg-paper); }
.btn--ghost-paper { background: transparent; color: var(--htg-paper); border-color: var(--htg-paper); }
.btn--ghost-paper:hover { background: var(--htg-paper); color: var(--htg-ink); }

.btn--sm  { min-height: 40px; padding: 0 var(--s-4); font-size: var(--fs-xs); }
.btn--lg  { min-height: 60px; padding: 0 var(--s-8); }
.btn--block { width: 100%; }

.arrow { display: inline-block; transition: transform var(--t-fast); }
.btn:hover .arrow, a:hover .arrow { transform: translateX(4px); }

/* --- Hairline --- */
.hairline { border-top: 1px solid var(--htg-line-soft); }

/* --- Live data dot --- */
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--htg-red);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--htg-red);
}

/* --- Reset / niceties --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--htg-paper);
  color: var(--htg-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--htg-ink); }
a:hover { color: var(--htg-red); }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input::placeholder { color: var(--htg-mute-2); }
::selection { background: var(--htg-ink); color: var(--htg-paper); }

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