/* =========================================================
   ecotel communication AG — Design Tokens
   Derived from ecotel-Folienmaster_2025_final.pptx
   ========================================================= */

:root {
  /* ----- BRAND PRIMARIES ------------------------------------ */
  --ecotel-orange:        #FF6E00;   /* signal / accent */
  --ecotel-orange-2:      #FBAE40;   /* mid orange (gradient companion) */
  --ecotel-orange-light:  #FFB67F;   /* tint */
  --ecotel-navy:          #1B3160;   /* primary navy */
  --ecotel-navy-deep:     #1B223A;   /* deeper navy (gradient stop) */
  --ecotel-navy-darker:   #0D172D;   /* near-black navy */
  --ecotel-navy-cool:     #1B305D;   /* very close to brand navy, used in layouts */

  /* ----- NEUTRAL SCALE ------------------------------------- */
  --ecotel-white:         #FFFFFF;
  --ecotel-paper:         #F7F8FA;   /* near-white panel */
  --ecotel-gray-50:       #EDEDED;   /* divider / light bg */
  --ecotel-gray-100:      #DDDDDD;
  --ecotel-gray-300:      #8D97AE;   /* muted blue-gray (used on dark) */
  --ecotel-gray-500:      #707070;   /* secondary text */
  --ecotel-gray-700:      #3C3C3C;   /* primary body text */
  --ecotel-gray-900:      #1A1A1A;

  /* ----- SUPPORT / SEMANTIC -------------------------------- */
  --ecotel-blue:          #3D85D8;   /* link / data viz */
  --ecotel-blue-warm:     #2C5BAA;
  --ecotel-success:       #1F8A5B;
  --ecotel-warning:       #F4A100;
  --ecotel-error:         #D8443D;

  /* ----- SEMANTIC SURFACE / FOREGROUND --------------------- */
  --bg:                   var(--ecotel-white);
  --bg-alt:               var(--ecotel-gray-50);
  --bg-dark:              var(--ecotel-navy);
  --bg-dark-2:            var(--ecotel-navy-deep);
  --fg-1:                 var(--ecotel-gray-700);   /* primary body */
  --fg-2:                 var(--ecotel-gray-500);   /* secondary */
  --fg-3:                 var(--ecotel-gray-300);   /* tertiary / on-dark muted */
  --fg-on-dark:           var(--ecotel-white);
  --fg-on-dark-2:         var(--ecotel-gray-300);
  --accent:               var(--ecotel-orange);
  --link:                 var(--ecotel-blue);

  /* ----- BRAND GRADIENTS ----------------------------------- */
  --grad-navy:            linear-gradient(135deg, #1B3160 0%, #1B223A 60%, #0D172D 100%); /* @kind color */
  --grad-navy-curve:      radial-gradient(120% 80% at 85% 60%, #0D172D 0%, #1B223A 35%, #1B3160 70%); /* @kind color */
  --grad-orange:          linear-gradient(135deg, #FF6E00 0%, #FBAE40 100%); /* @kind color */

  /* ----- TYPOGRAPHY: FAMILIES ------------------------------ */
  /* Original spec: Arial Black for display, Arial for body.
     Webfont substitutes: Archivo Black for display, Archivo for body.
     System-safe fallback chain included. */
  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue",
                  Helvetica, Arial, sans-serif;
  --font-sans:    "Archivo", "Arial", "Helvetica Neue",
                  Helvetica, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ----- TYPOGRAPHY: SCALE --------------------------------- */
  /* Slide-native sizes (1920×1080 frame) derived from PPT master:
     sub  = 16pt, body = 18pt, body-lg = 20pt, h3 = 24pt,
     h2 = 32pt, h1 = 44pt, display = 64pt, hero = 88pt        */
  --fs-xs:     12px;
  --fs-sm:     14px;
  --fs-base:   16px;
  --fs-md:     18px;
  --fs-lg:     20px;
  --fs-xl:     24px;
  --fs-2xl:    32px;
  --fs-3xl:    44px;
  --fs-4xl:    64px;
  --fs-hero:   88px;

  --lh-tight:  1.05;  /* @kind other */
  --lh-snug:   1.18;  /* @kind other */
  --lh-normal: 1.4;   /* @kind other */
  --lh-loose:  1.55;  /* @kind other */

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ----- SPACING / RADII / SHADOWS ------------------------- */
  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  --shadow-1: 0 1px 2px rgba(13, 23, 45, 0.06),
              0 1px 1px rgba(13, 23, 45, 0.04);
  --shadow-2: 0 4px 14px rgba(13, 23, 45, 0.08),
              0 2px 4px rgba(13, 23, 45, 0.05);
  --shadow-3: 0 14px 32px rgba(13, 23, 45, 0.14),
              0 4px 10px rgba(13, 23, 45, 0.06);
  --shadow-glow-orange: 0 10px 30px rgba(255, 110, 0, 0.28);

  /* ----- BORDERS ------------------------------------------- */
  --border-hairline: 1px solid rgba(13, 23, 45, 0.10); /* @kind other */
  --border-soft:     1px solid var(--ecotel-gray-50);
  --border-strong:   1px solid var(--ecotel-gray-300);
}

/* =========================================================
   WEBFONTS — Archivo / Archivo Black (Google Fonts)
   These are the substitutes for Arial / Arial Black.
   If you have the original Arial license, swap these.
   ========================================================= */
/* ABGESCHALTET - bewusst, nicht vergessen.
   Ein @import von fonts.googleapis.com schickt die IP jedes Besuchers an
   Google, bevor die Seite steht. Bei einer Verwaltung, in der
   Kundendaten liegen, ist das eine Datenweitergabe ohne Anlass - und die
   Originalvorgabe des Design-Systems ist ohnehin Arial, nicht Archivo.
   Die Fallback-Kette in --font-display / --font-sans greift damit.

   Wer Archivo will: Schriften nach statisch/schriften/ legen und hier
   ein lokales @font-face eintragen. Dann bleibt alles auf dem Server.
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500&display=swap");
*/

/* =========================================================
   SEMANTIC TYPOGRAPHY
   ========================================================= */
.h-hero,
h1.hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

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

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

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ecotel-orange);
}

.body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.body-lg { font-size: var(--fs-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-sm); }

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.quote, blockquote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ecotel-navy);
  border-left: 4px solid var(--ecotel-orange);
  padding-left: var(--space-5);
  margin: 0;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
  background: var(--ecotel-gray-50);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--ecotel-navy);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: currentColor; }

/* On-dark variants — flip foreground/eyebrow */
.on-dark, .on-dark .body, .on-dark p { color: var(--fg-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--fg-on-dark); }
.on-dark .body-2, .on-dark .secondary { color: var(--fg-on-dark-2); }
.on-dark .eyebrow { color: var(--ecotel-orange); }