/* ============================================================
   Grunwald Energie & Gebäude — Design Tokens
   Typography + Colors
   ============================================================ */

/* Font faces — Museo Sans (Grunwald corporate typeface).
   Weights available: 100 (thin), 300 (light), 500 (medium), 700 (bold).
   No 400 or 600 — map semantic weights to the nearest available cut:
     • "Regular" / 400 → 300 (Light)
     • "Semibold" / 600 → 500 (Medium)
   Headlines use 700; hairlines use 100. */
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans_100.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans_300.otf") format("opentype");
  font-weight: 300 400;  /* covers regular */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans_500.otf") format("opentype");
  font-weight: 500 600;  /* covers semibold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans_700.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (from GWE Farbcodes.png) ---------- */
  --gw-blue:        #3fa6c6;  /* 100% cyan, 17% yellow — sky/tech */
  --gw-green:       #4ba55e;  /* 100% cyan, 100% yellow — nature/primary */
  --gw-yellow:      #f3e039;  /* 100% yellow — energy/sun */

  /* Brand tints (derived, for backgrounds and hovers) */
  --gw-blue-600:    #2f8ba8;
  --gw-blue-100:    #e1f1f6;
  --gw-green-700:   #3a8549;
  --gw-green-600:   #419253;
  --gw-green-100:   #e4f1e5;
  --gw-yellow-600:  #d4c226;
  --gw-yellow-100:  #fbf6d6;

  /* The signature gradient — blue → green → yellow */
  --gw-gradient:    linear-gradient(135deg, #3fa6c6 0%, #4ba55e 55%, #f3e039 100%);
  --gw-gradient-v:  linear-gradient(180deg, #3fa6c6 0%, #4ba55e 55%, #f3e039 100%);

  /* ---------- Neutrals (Apple-inspired binary palette) ---------- */
  --gw-black:       #000000;
  --gw-near-black:  #1d1d1f;   /* text on light */
  --gw-gray-900:    #242426;
  --gw-gray-800:    #272729;
  --gw-gray-700:    #2a2a2d;
  --gw-gray-200:    #ededf2;
  --gw-gray-100:    #f5f5f7;   /* light section bg */
  --gw-gray-50:     #fafafc;
  --gw-white:       #ffffff;

  /* ---------- Semantic color tokens ---------- */
  /* Backgrounds */
  --bg:             var(--gw-white);
  --bg-subtle:      var(--gw-gray-100);
  --bg-inverse:     var(--gw-black);

  /* Foreground text */
  --fg1:            var(--gw-near-black);     /* primary */
  --fg2:            rgba(0, 0, 0, 0.8);       /* secondary */
  --fg3:            rgba(0, 0, 0, 0.56);      /* tertiary */
  --fg4:            rgba(0, 0, 0, 0.4);       /* disabled / tertiary small */
  --fg-on-inverse:  var(--gw-white);

  /* Interactive — Grunwald Green as primary CTA */
  --accent:         var(--gw-green);
  --accent-hover:   var(--gw-green-700);
  --accent-text:    var(--gw-green-700);      /* green text on light bg */
  --accent-text-dark: #6cc77e;                 /* lighter green on dark bg */

  /* Secondary accents (use sparingly) */
  --accent-cool:    var(--gw-blue);
  --accent-warm:    var(--gw-yellow);

  /* Focus ring — green */
  --focus-ring:     var(--gw-green);

  /* Borders / dividers */
  --border:         rgba(0, 0, 0, 0.1);
  --border-strong:  rgba(0, 0, 0, 0.2);
  --border-dark:    rgba(255, 255, 255, 0.14);

  /* Shadow — Apple-style soft diffused */
  --shadow-card:    0 3px 30px rgba(0, 0, 0, 0.12);
  --shadow-lift:    0 5px 30px rgba(0, 0, 0, 0.18);
  --shadow-hero:    0 10px 60px rgba(0, 0, 0, 0.22);

  /* Semantic / status */
  --success:        var(--gw-green);
  --warning:        #e8a33a;
  --danger:         #c93b2f;
  --info:           var(--gw-blue);

  /* ---------- Radii ---------- */
  --radius-xs:      5px;
  --radius-sm:      8px;
  --radius-md:      11px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-pill:    980px;
  --radius-circle:  50%;

  /* ---------- Spacing (8px base, dense micro-scale) ---------- */
  --sp-1:   2px;
  --sp-2:   4px;
  --sp-3:   6px;
  --sp-4:   8px;
  --sp-5:   12px;
  --sp-6:   16px;
  --sp-7:   20px;
  --sp-8:   24px;
  --sp-9:   32px;
  --sp-10:  40px;
  --sp-12:  56px;
  --sp-14:  80px;
  --sp-16:  120px;

  /* ---------- Motion ---------- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-med:        240ms;
  --dur-slow:       420ms;

  /* ---------- Type families ---------- */
  --font-display: "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- Dark mode (auto + .dark class) ----------
   Dark sections get inverted colors. Use <body class="dark"> or
   prefers-color-scheme: dark; Grunwald logo flips accordingly. */
.dark,
[data-theme="dark"] {
  --bg:             var(--gw-black);
  --bg-subtle:      var(--gw-gray-800);
  --bg-inverse:     var(--gw-white);

  --fg1:            var(--gw-white);
  --fg2:            rgba(255, 255, 255, 0.85);
  --fg3:            rgba(255, 255, 255, 0.6);
  --fg4:            rgba(255, 255, 255, 0.4);
  --fg-on-inverse:  var(--gw-near-black);

  --accent-text:    var(--accent-text-dark);

  --border:         rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.24);

  --shadow-card:    0 3px 30px rgba(0, 0, 0, 0.5);
  --shadow-lift:    0 5px 30px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Typography scale — semantic classes
   Museo Sans weights available: 100 / 300 / 500 / 700.
   Semantic weight map: 400→300 (Light), 600→500 (Medium) via font-face ranges.
   Negative letter-spacing universally applied.
   ============================================================ */

.gw-display-hero,
h1.gw {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--fg1);
}

.gw-section-heading,
h2.gw {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

.gw-tile-heading,
h3.gw {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.gw-card-title,
h4.gw {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: -0.005em;
  color: var(--fg1);
}

.gw-sub-heading {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.19;
  color: var(--fg2);
}

.gw-nav-heading {
  font-family: var(--font-text);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.47;
  letter-spacing: -0.022em;
}

.gw-body,
p.gw {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--fg2);
}

.gw-body-emphasis {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--fg1);
}

.gw-caption {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.29;
  letter-spacing: -0.016em;
  color: var(--fg2);
}

.gw-caption-bold {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.016em;
  color: var(--fg1);
}

.gw-link {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.016em;
  color: var(--accent-text);
  text-decoration: none;
}
.gw-link:hover { text-decoration: underline; }

.gw-micro {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.01em;
  color: var(--fg3);
}

.gw-nano {
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.008em;
  color: var(--fg3);
}

/* Gradient text treatment — reserved for brand moments */
.gw-gradient-text {
  background: var(--gw-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ============================================================
   Base reset and element defaults
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

::selection {
  background: var(--gw-green);
  color: var(--gw-white);
}