/* HTPA Design System — colors & type tokens
   Pure black & white only. Grayscale for any secondary tone.
   Headlines: warm humanist serif. Body: clean modern sans.
   Web fonts loaded via <link> in index.html for parallel fetch. */

:root {
  /* ------- Color: warm dark theme with gold accent ------- */
  --black:        #0D0D0D;   /* hero / page background */
  --white:        #F2EFE9;   /* warm near-white */

  /* Grayscale — warm-tinted, layered for depth. */
  --cream:        #F5F1E8;   /* warm cream — light section surface */
  --gray-50:      #F7F4EE;
  --gray-100:     #EAE5DA;   /* subtle section tone on light */
  --gray-200:     #DAD3C3;   /* divider on light */
  --gray-300:     #B8AF9C;
  --gray-400:     #8A8378;   /* helper text on either ground */
  --gray-500:     #5C564C;
  --gray-600:     #3A352D;
  --gray-700:     #2A2620;   /* card surface on dark */
  --gray-800:     #1F1B16;   /* elevated surface on dark */
  --gray-900:     #171715;   /* base card-tone on dark (secondary surface) */

  /* Accent — warm gold (Scaling-style) */
  --accent:       #C9A24B;
  --accent-soft:  #D4B062;
  --accent-deep:  #8F6E22;

  /* Loss / warning — muted desaturated red, used sparingly */
  --loss:         #D6584A;
  --loss-soft:    #4A1F1A;

  /* ------- Semantic surface tokens ------- */
  --bg-dark:      var(--black);
  --bg-light:     var(--white);

  --fg-on-dark:   var(--white);
  --fg-on-light:  var(--black);

  --muted-on-dark:  #8A8378;
  --muted-on-light: #5C564C;

  --border-on-dark:  #2A2620;
  --border-on-light: #DAD3C3;

  /* ------- Typography ------- */
  --font-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Headlines — warm humanist serif. Italic for the emphasized line. */
  --h-display:   clamp(48px, 6.4vw, 84px);   /* hero */
  --h1:          clamp(40px, 4.4vw, 60px);   /* section H2 */
  --h2:          clamp(28px, 2.6vw, 36px);   /* sub-headings */
  --h3:          22px;                        /* card titles */
  --h4:          17px;                        /* small caps cluster */

  /* Body */
  --body-lg:     19px;
  --body:        16px;
  --body-sm:     14px;
  --eyebrow:     12px;   /* small caps section markers */

  /* Line heights tuned for serif display + sans body */
  --lh-display:  1.04;
  --lh-headline: 1.10;
  --lh-body:     1.55;

  /* Tracking */
  --tr-eyebrow:  0.16em;
  --tr-tight:    -0.02em;
  --tr-tighter:  -0.03em;

  /* ------- Spacing ------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --section-pad-y: clamp(64px, 9vw, 128px);
  --section-pad-x: clamp(20px, 5vw, 64px);

  /* ------- Radii (tight) ------- */
  --r-button: 5px;
  --r-card:   10px;
  --r-pill:   999px;

  /* ------- Border weight ------- */
  --bw: 1px;

  /* ------- Motion ------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;
}

/* ===== Element-level semantic styles ===== */
html, body {
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--fg-on-light);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}

h1, .h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h1);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h3, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2);
  line-height: 1.12;
  letter-spacing: -0.018em;
}

h4, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--h3);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

p { line-height: var(--lh-body); }

/* Italic line stack — emphasis via weight, no italic. */
.italic-line {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* Eyebrow / section marker — mono for tech bite */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.eyebrow::before { content: "• "; }

/* Helper text under CTAs — mono, small */
.helper {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted-on-light);
}
.on-dark .helper { color: var(--muted-on-dark); }

/* Mono utility — comparison tables, data, small data labels */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}