/* =============================================================
   Effizienzpioniere — Colors & Type
   Source: EP Farben 2026 brand book + Logo-RGB
   Typeface: Montserrat (per spec — Extrafett 800, Fett 700,
   Halbfett 600 / "660", "540", Medium 500, "460", Regular 400)
   ============================================================= */

/* ----- Webfont: Montserrat (local variable fonts) ----- */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */

  /* Sunrise — light/accent ramp (warm-to-cool greens) */
  --ep-sunset:           #EA5115;  /* Sunrise Sun – warning/accent orange */
  --ep-sunrise-gradient: #D3EE3F;  /* light lime */
  --ep-sunrise-grass:    #64E755;  /* fresh grass green */
  --ep-sunrise-moss:     #00E069;  /* vibrant moss */

  /* Penumbra → Antumbra → Umbra — primary brand greens (deep) */
  --ep-penumbra:         #009947;  /* primary brand green (logo) */
  --ep-antumbra:         #136B3C;  /* mid-deep green */
  --ep-umbra:            #0E4D2A;  /* deepest green */

  /* Neutrals */
  --ep-white:            #FFFFFF;
  --ep-platinum:         #E6E6E6;
  --ep-silber:           #CCCCCC;
  --ep-screen-schwarz:   #262626;  /* preferred screen black */
  --ep-schwarz:          #000000;  /* print only */

  /* ---------- SEMANTIC TOKENS ---------- */

  /* Foreground / text */
  --fg-1: var(--ep-screen-schwarz);   /* primary text */
  --fg-2: #4D4D4D;                    /* secondary text (~70% of fg-1) */
  --fg-3: #808080;                    /* tertiary / captions */
  --fg-on-dark: var(--ep-white);
  --fg-link: var(--ep-penumbra);
  --fg-link-hover: var(--ep-antumbra);

  /* Backgrounds */
  --bg-1: var(--ep-white);            /* canvas */
  --bg-2: #F6F6F6;                    /* subtle surface */
  --bg-3: var(--ep-platinum);         /* card / divider tone */
  --bg-inverse: var(--ep-screen-schwarz);
  --bg-brand: var(--ep-penumbra);
  --bg-brand-deep: var(--ep-umbra);

  /* Borders */
  --border-1: var(--ep-platinum);
  --border-2: var(--ep-silber);
  --border-strong: var(--ep-screen-schwarz);

  /* Accents */
  --accent: var(--ep-penumbra);
  --accent-hover: var(--ep-antumbra);
  --accent-press: var(--ep-umbra);
  --accent-soft: #E6F5EC;             /* tint of penumbra (10%) */

  /* Semantic */
  --success: var(--ep-sunrise-moss);
  --success-deep: var(--ep-penumbra);
  --warning: var(--ep-sunset);
  --info: var(--ep-antumbra);

  /* Gradients */
  --grad-sunrise: linear-gradient(135deg, var(--ep-sunrise-gradient) 0%, var(--ep-sunrise-grass) 50%, var(--ep-sunrise-moss) 100%);
  --grad-day: linear-gradient(135deg, var(--ep-sunrise-moss) 0%, var(--ep-penumbra) 100%);
  --grad-deep: linear-gradient(160deg, var(--ep-penumbra) 0%, var(--ep-umbra) 100%);
  --grad-dawn: linear-gradient(135deg, var(--ep-sunset) 0%, var(--ep-sunrise-gradient) 100%);

  /* ---------- TYPE ---------- */
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* Weights — mapped to spec naming */
  --w-regular: 400;     /* "460" rounded to 500 in body, but Regular 400 used for body too */
  --w-body:    500;     /* "Körper Montserrat 460" — closest available */
  --w-h2:      500;     /* "540" */
  --w-medium:  500;
  --w-h4:      600;     /* "660" */
  --w-halbfett:600;     /* Halbfett */
  --w-fett:    700;     /* Fett */
  --w-extrafett: 800;   /* Extrafett */

  /* Sizes — spec is mm @ print. Web mapping (1mm ≈ 3.78px @ 96dpi).
     We use a usable web scale that mirrors the hierarchy. */
  --fs-micro:    12px;  /* MICRO-TITEL 7mm halbfett */
  --fs-caption:  13px;
  --fs-body:     16px;  /* Körper 3.5mm → ~13px print, 16px screen */
  --fs-body-lg:  18px;
  --fs-h4:       20px;  /* 4.4mm */
  --fs-h3:       26px;  /* 5.5mm halbfett */
  --fs-h2:       32px;  /* 6.9mm "540" */
  --fs-h1:       40px;  /* 8.6mm fett kursiv */
  --fs-h1-sub:   24px;  /* 5.5mm medium */
  --fs-title:    72px;  /* 17–20mm Extrafett */
  --fs-display:  96px;
  --fs-numeral:  64px;  /* "1" Nummerierung Ziffer 16mm extrafett */

  /* Line heights — based on 4.5mm baseline grid */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.5;
  --lh-loose: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-micro: 0.08em; /* MICRO-TITEL caps */

  /* ---------- SPACING / RADIUS / SHADOW ---------- */
  /* 4.5mm baseline → 4px web grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Corner radii — logo capsule = fully pill; cards subtle.
     The logo wordmark sits in a perfect pill, suggesting full radii
     for primary CTAs and capsule accents. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* Shadows — subtle, never blue-tinted. Use umbra green at low opacity. */
  --shadow-1: 0 1px 2px rgba(14, 77, 42, 0.06), 0 1px 1px rgba(14, 77, 42, 0.04);
  --shadow-2: 0 2px 6px rgba(14, 77, 42, 0.08), 0 1px 2px rgba(14, 77, 42, 0.04);
  --shadow-3: 0 8px 24px rgba(14, 77, 42, 0.10), 0 2px 6px rgba(14, 77, 42, 0.05);
  --shadow-4: 0 20px 48px rgba(14, 77, 42, 0.14), 0 6px 12px rgba(14, 77, 42, 0.06);
}

/* =============================================================
   SEMANTIC TYPE STYLES
   Apply with utility classes OR by extending elements directly.
   ============================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
}

.ep-micro-title,
.ep-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-halbfett);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ep-penumbra);
  line-height: var(--lh-tight);
}

.ep-title,
h1.ep-display {
  font-family: var(--font-display);
  font-weight: var(--w-extrafett);
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ep-subtitle {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-h1-sub);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

h1, .ep-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-fett);
  font-style: italic;            /* spec: Fett Kursiv */
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: inherit;                /* let dark/light surfaces win — fg-1 by default via body */
  margin: 0 0 var(--space-4);
}

.ep-h1-sub {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-h1-sub);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

h2, .ep-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h3, .ep-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-halbfett);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .ep-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-h4);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

p, .ep-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.ep-body-lg { font-size: var(--fs-body-lg); }
.ep-caption { font-size: var(--fs-caption); color: var(--fg-2); }

.ep-numeral {
  font-family: var(--font-display);
  font-weight: var(--w-extrafett);
  font-size: var(--fs-numeral);
  color: var(--ep-penumbra);
  line-height: 1;
}

a {
  color: var(--fg-link);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 120ms ease;
}
a:hover { color: var(--fg-link-hover); }

::selection { background: var(--ep-sunrise-grass); color: var(--ep-umbra); }