/*
  Hebra AI marketing typography — canonical source of truth.

  Cabinet Grotesk  = display / headlines
  Satoshi          = body / UI

  Loaded as variable fonts from Fontshare (separate requests — combining
  families in one Fontshare URL can resolve the wrong face).

  Do not apply these families to the logo image/SVG (.logo-icon).
  The lockup tagline is UI text and uses Satoshi.
*/

@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@1&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@1&display=swap");

:root {
  --font-heading: "Cabinet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-display: 800;
  --font-weight-heading: 700;
  --font-weight-title: 650;
  --font-weight-body: 400;
  --font-weight-ui: 500;
  --font-weight-cta: 600;
  --font-weight-label: 600;
}

html,
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.hebra-heading,
.hebra-h1,
.hebra-h2,
.hebra-h3,
.hero-headline,
.pain-point-headline,
.cap-head,
.outcome-card-title,
.stack-hebra-title,
.tth-title,
.section-header h2,
.final-cta-strip-title,
.approach-section .section-title,
.hebra-meaning-title,
.os-card h4,
.approach-card h3,
.purpose-card h4,
.font-heading {
  font-family: var(--font-heading);
}

h1,
.hebra-h1,
.hero-headline,
.plat-hero h1,
.deploy-hero h1,
.hero-content h1 {
  font-weight: var(--font-weight-display);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

h2,
.hebra-h2,
.section-header h2,
.final-cta-strip-title,
.approach-section .section-title,
.hebra-meaning-title,
.callout h2 {
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h3,
.hebra-h3,
.cap-head,
.outcome-card-title,
.stack-hebra-title,
.pain-point-headline,
.tth-title,
.stage h3,
.approach-card h3,
.os-card h4,
.validate-card h3,
.ready-card h3,
.value-card h3,
.purpose-card h4 {
  font-weight: var(--font-weight-title);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

h4,
h5,
h6,
p,
li,
a,
button,
input,
textarea,
select,
label,
small,
strong,
em,
blockquote,
th,
td,
caption,
nav,
footer,
figcaption,
time,
.font-body {
  font-family: var(--font-body);
}

.hero-eyebrow,
.section-eyebrow,
.tth-eyebrow,
.os-card h3,
.about-card-label,
.stage-kicker,
.adopt-step strong {
  font-family: var(--font-body);
  font-weight: var(--font-weight-label);
}

button,
.cta-demo,
.cta-primary,
.cta-button,
.cta-signin,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-body);
}

.cta-demo,
.cta-primary,
.cta-button,
.cta-secondary,
.cookie-btn,
input[type="submit"],
input[type="button"] {
  font-weight: var(--font-weight-cta);
}

.cta-signin,
.nav-links a,
footer .footer-nav a,
footer .footer-links a {
  font-family: var(--font-body);
  font-weight: var(--font-weight-ui);
}

.logo-tagline {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
}

.atelier-sim-pill {
  font-family: var(--font-body);
  font-weight: var(--font-weight-ui);
}