/* ==========================================================================
   Vital Heroes — Colors & Type Tokens
   Source of truth: assets/Vital_Heroes_Brand_Guidelines.pdf
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Final Six";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/FinalSix-Book.otf") format("opentype");
}
@font-face {
  font-family: "Final Six";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/FinalSix-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Final Six";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/FinalSix-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Final Six";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/FinalSix-Black.otf") format("opentype");
}

/* --------------------------------------------------------------------------
   Tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand colors (styleguide §2.1) ---- */
  --vh-green:     #003d36;  /* dunkelgrün — primary */
  --vh-beige:     #e3ddd1;  /* graubeige — primary */
  --vh-orange:    #ff6713;  /* accent */
  --vh-white:     #ffffff;
  --vh-black:     #000000;

  /* Color-hierarchy ratios from §2.3 (for reference, not consumed):
     beige 30% · green 30% · white 25% · orange 15% */

  /* ---- Tints / lifts derived from greens & beige ----
     (Not in PDF; conservatively mixed within the same hue family.) */
  --vh-green-95:  #00322c;  /* deeper, for press */
  --vh-green-80:  #1f5751;  /* hover on green */
  --vh-green-20:  #b3c5c2;  /* tinted divider on white */
  --vh-beige-90:  #d4ccbd;  /* hover on beige */
  --vh-beige-50:  #f1ede5;  /* very pale wash */
  --vh-orange-95: #e25a10;  /* press */
  --vh-orange-20: #ffd8c4;  /* faint highlight */

  /* ---- Illustration-only palette (styleguide §4.1) ----
     DO NOT use for layout, text, backgrounds, or UI. */
  --vh-ill-brown: #955125;
  --vh-ill-peach: #f3ca9b;
  --vh-ill-sage:  #6d9d61;

  /* ---- Semantic surface / foreground roles ---- */
  --vh-bg:           var(--vh-beige);
  --vh-bg-alt:       var(--vh-white);
  --vh-bg-inverse:   var(--vh-green);
  --vh-fg:           var(--vh-green);
  --vh-fg-muted:     #4a6863;          /* green at ~60% on beige */
  --vh-fg-on-green:  var(--vh-beige);
  --vh-fg-on-orange: var(--vh-white);
  --vh-accent:       var(--vh-orange);
  --vh-link:         var(--vh-orange);
  --vh-divider:      rgba(0, 61, 54, 0.14);

  /* ---- Type families ---- */
  --vh-font-primary:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vh-font-secondary: "Final Six", "Plus Jakarta Sans", sans-serif;

  /* ---- Type scale (1920×1080 reference; rem-friendly) ----
     Settings from §3.4: headline LH 100%, copy LH 110%, button tracking 25/1000. */
  --vh-fs-display:   clamp(56px, 6.5vw, 112px);
  --vh-fs-h1:        clamp(40px, 4.2vw, 72px);
  --vh-fs-h2:        clamp(32px, 3vw, 52px);
  --vh-fs-h3:        clamp(24px, 2vw, 36px);
  --vh-fs-lead:      clamp(18px, 1.3vw, 22px);
  --vh-fs-body:      17px;
  --vh-fs-small:     14px;
  --vh-fs-anno:      13px;   /* Final Six annotation */
  --vh-fs-button:    15px;

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

  /* ---- Radii ----
     Pills (button/box) are visually 100% — i.e. half the height.
     The signature box keeps ONE corner square (90°). */
  --vh-r-pill: 999px;
  --vh-r-md:   16px;
  --vh-r-sm:   8px;
  --vh-r-none: 0px;

  /* ---- Elevation — restrained, mostly flat ---- */
  --vh-shadow-sm: 0 1px 2px rgba(0, 61, 54, 0.06);
  --vh-shadow-md: 0 8px 24px -8px rgba(0, 61, 54, 0.18);
  --vh-shadow-lg: 0 24px 48px -16px rgba(0, 61, 54, 0.24);

  /* ---- Motion ---- */
  --vh-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --vh-ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --vh-dur-fast:    140ms;
  --vh-dur:         220ms;
  --vh-dur-slow:    420ms;

  /* ---- Layout ---- */
  --vh-container:   1280px;
  --vh-gutter:      24px;
}

/* --------------------------------------------------------------------------
   Base + semantic element styles
   -------------------------------------------------------------------------- */
html, body {
  background: var(--vh-bg);
  color: var(--vh-fg);
  font-family: var(--vh-font-primary);
  font-size: var(--vh-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--vh-orange); color: var(--vh-white); }

/* Headlines — Extra Bold, line-height 100% (§3.4) */
h1, .vh-h1, .vh-display {
  font-family: var(--vh-font-primary);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.vh-display { font-size: var(--vh-fs-display); }
h1, .vh-h1 { font-size: var(--vh-fs-h1); }

/* Sub-headline — Semi Bold, line-height 100% */
h2, .vh-h2 {
  font-family: var(--vh-font-primary);
  font-weight: 600;
  font-size: var(--vh-fs-h2);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
h3, .vh-h3 {
  font-family: var(--vh-font-primary);
  font-weight: 600;
  font-size: var(--vh-fs-h3);
  line-height: 1.15;
  margin: 0;
}

/* Copy — Regular, line-height 110% */
p, .vh-body {
  font-family: var(--vh-font-primary);
  font-weight: 400;
  font-size: var(--vh-fs-body);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}
.vh-lead {
  font-size: var(--vh-fs-lead);
  font-weight: 400;
  line-height: 1.4;
}
.vh-light-italic {
  font-weight: 300;
  font-style: italic;
}

/* Annotation — Final Six Bold, all caps (§3.4) */
.vh-anno {
  font-family: var(--vh-font-secondary);
  font-weight: 700;
  font-size: var(--vh-fs-anno);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Button text — Regular, tracking 25/1000 (§3.4), uppercase */
.vh-btn-label {
  font-family: var(--vh-font-primary);
  font-weight: 400;
  font-size: var(--vh-fs-button);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  line-height: 1;
}

/* Highlight (orange phrase inside copy) — §3.5 */
.vh-hl {
  color: var(--vh-orange);
  font-weight: 800;
}

/* Links */
a { color: var(--vh-orange); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }