/* =============================================================
   Hephaestus Design System
   colors_and_type.css
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400&family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500&display=swap');

/* -----------------------------------------------------------------
   1. COLORS
   Three values. No accents. Don't add any.
   ----------------------------------------------------------------- */
:root {
  /* Primitives */
  --hph-black: #000000;        /* Velvet Black — the only canvas */
  --hph-white: #ffffff;        /* Showroom White — all text, borders, CTAs */
  --hph-gray:  #999999;        /* Silver Mist — disabled, tertiary, hairlines */
  --hph-forge: #7d1515;        /* Forge Red — legacy accent */
  --aed-burgundy: #800020;     /* Burgundy — aedificio's second main colour */

  /* Legibility overlay (the one allowed gradient) */
  --hph-vignette: rgba(0, 0, 0, 0.4);

  /* Semantic — foreground */
  --fg-primary:   var(--hph-white);
  --fg-tertiary:  var(--hph-gray);
  --fg-disabled:  var(--hph-gray);
  --fg-accent:    var(--aed-burgundy);  /* burgundy — rules, marks, fills, states */

  /* Semantic — background */
  --bg-canvas:    var(--hph-black);
  --bg-surface:   var(--hph-black);  /* there is no secondary surface */

  /* Borders */
  --border-primary:   var(--hph-white);   /* 1px solid white */
  --border-secondary: var(--hph-gray);    /* 1px solid gray — hairline */

  /* -----------------------------------------------------------------
     2. TYPOGRAPHY — FAMILIES
     Substitutes flagged. Proprietary faces drop into fonts/.
     ----------------------------------------------------------------- */
  --font-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-text:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* -----------------------------------------------------------------
     3. TYPOGRAPHY — SCALE
     One weight (400). Scale is hierarchy.
     ----------------------------------------------------------------- */
  /* Display — sculptural, ALL CAPS. Cap at 128px for substitute fonts. */
  --size-hero-monumental: 128px;   /* original brief: 288px w/ proprietary face */
  --size-hero-mid:         60px;
  --size-section:          36px;

  /* Body / UI */
  --size-lead:   20px;
  --size-body:   16px;
  --size-small:  14px;
  --size-micro:  12px;

  /* Line heights */
  --lh-display-tight:  1.00;
  --lh-display-loose:  1.11;   /* 36px section heading */
  --lh-display-sub:    1.05;   /* loosened for font substitutes */
  --lh-body:           1.50;
  --lh-body-tight:     1.43;
  --lh-body-compact:   1.33;
  --lh-lead:           1.40;

  /* Tracking — two registers only */
  --track-mono-caps:   1.4px;
  --track-mono-small:  1.2px;
  --track-none:        0;

  /* -----------------------------------------------------------------
     4. SPACING — Six values. Period.
     ----------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  12px;
  --sp-4:  36px;
  --sp-5:  48px;
  --sp-6:  64px;

  /* -----------------------------------------------------------------
     5. RADII — 0, 6px, 9999px. Three values.
     ----------------------------------------------------------------- */
  --radius-0:      0;
  --radius-utility: 6px;
  --radius-pill:   9999px;

  /* -----------------------------------------------------------------
     6. MOTION — quiet, never bouncy
     ----------------------------------------------------------------- */
  --ease-quiet: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  /* -----------------------------------------------------------------
     7. LAYOUT
     ----------------------------------------------------------------- */
  --max-content: 1720px;
}

/* =============================================================
   SEMANTIC TYPE CLASSES — use these in markup
   ============================================================= */

/* Hero — the monumental moment, once per page. */
.hph-hero-monumental,
h1.hph-monumental {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-hero-monumental);
  line-height: var(--lh-display-sub);   /* 1.05 w/ substitute */
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-primary);
  margin: 0;
}

/* Mid display — feature headlines */
.hph-display-mid,
h2.hph-display-mid {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-hero-mid);
  line-height: var(--lh-display-tight);
  letter-spacing: var(--track-mono-caps);
  text-transform: uppercase;
  color: var(--fg-primary);
  margin: 0;
}

/* Section heading */
.hph-section,
h3.hph-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-section);
  line-height: var(--lh-display-loose);
  color: var(--fg-primary);
  margin: 0;
}

/* Monumental mono headline — technical labels at hero scale */
.hph-mono-hero {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-hero-mid);
  line-height: var(--lh-display-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
  margin: 0;
}

/* Lead body */
.hph-lead,
p.hph-lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--fg-primary);
  margin: 0;
}

/* Body */
.hph-body,
p {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  margin: 0;
}

/* Compact body */
.hph-body-compact {
  font-family: var(--font-text);
  font-size: var(--size-small);
  line-height: var(--lh-body-tight);
  color: var(--fg-primary);
}

/* UI link — primary navigation */
.hph-link {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-small);
  line-height: var(--lh-body-tight);
  letter-spacing: var(--track-mono-caps);
  text-transform: uppercase;
  color: var(--fg-primary);
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-quiet);
}
.hph-link:hover { opacity: 0.75; }

/* Button label — caps */
.hph-btn-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-small);
  line-height: var(--lh-body-tight);
  letter-spacing: var(--track-mono-caps);
  text-transform: uppercase;
}

/* Button label — compact */
.hph-btn-label-sm {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-micro);
  line-height: var(--lh-body-compact);
  letter-spacing: var(--track-mono-small);
  text-transform: uppercase;
}

/* Caption — caps wide */
.hph-caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-small);
  line-height: var(--lh-body-tight);
  letter-spacing: var(--track-mono-caps);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.hph-caption-plain {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-small);
  line-height: var(--lh-body-tight);
  letter-spacing: var(--track-mono-caps);
  color: var(--fg-primary);
}

/* Caption — micro */
.hph-caption-micro {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-micro);
  line-height: var(--lh-body-compact);
  letter-spacing: var(--track-mono-small);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.hph-tertiary {
  color: var(--fg-tertiary);
}

/* =============================================================
   BASE RESET
   ============================================================= */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

*, *::before, *::after { box-sizing: border-box; }

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

/* =============================================================
   PRIMARY PILL BUTTON
   Transparent fill, 1px white border, 9999px radius.
   Hover inverts. Active drops opacity.
   ============================================================= */
.hph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  color: var(--fg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-small);
  line-height: 1;
  letter-spacing: var(--track-mono-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-quiet),
    color var(--dur-base) var(--ease-quiet),
    opacity var(--dur-fast) var(--ease-quiet);
}
.hph-btn:hover {
  background: var(--hph-white);
  color: var(--hph-black);
}
.hph-btn:active { opacity: 0.7; }
.hph-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--hph-black), 0 0 0 2px var(--hph-white);
}

/* =============================================================
   SECONDARY UTILITY BUTTON
   Transparent fill, 1px gray border, 6px radius, smaller.
   ============================================================= */
.hph-btn--utility {
  padding: 6px 12px;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-utility);
  font-size: var(--size-micro);
  letter-spacing: var(--track-mono-small);
}
.hph-btn--utility:hover {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--border-primary);
}

/* Ghost — no border, no padding beyond inline */
.hph-btn--ghost {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg-primary);
}
.hph-btn--ghost:hover {
  background: transparent;
  color: var(--fg-primary);
  opacity: 0.75;
}

/* =============================================================
   INPUTS (homepage has none; defaults apply on deeper pages)
   ============================================================= */
.hph-input {
  width: 100%;
  background: var(--bg-canvas);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-utility);
  padding: 12px;
  color: var(--fg-primary);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  transition: border-color var(--dur-base) var(--ease-quiet);
}
.hph-input::placeholder { color: var(--fg-tertiary); }
.hph-input:focus {
  outline: none;
  border-color: var(--border-primary);
}

/* =============================================================
   LEGIBILITY VIGNETTE — the only permitted gradient
   Apply as an absolutely-positioned overlay on media with text.
   ============================================================= */
.hph-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--hph-vignette) 0%, transparent 60%);
}

/* =============================================================
   HAIRLINE — 1px divider
   ============================================================= */
.hph-hairline {
  border: 0;
  border-top: 1px solid var(--border-secondary);
  margin: 0;
}
.hph-hairline--white { border-top-color: var(--border-primary); }