/* ============================================================
   Oberland SolarPartner GmbH — Colors & Type
   Foundational + semantic CSS variables.
   Fonts: Verdana (headings/primary — matches the logo wordmark; a
          system font, no file needed), Roboto (body, labels, accents).
   Fonts: Verdana (headings/primary — system font, no download), Roboto
          (body/labels/accents — self-hosted locally via fonts.css).
   This deploy build loads NO external resources (DSGVO). Fonts come from
   the local fonts.css + fonts/ directory; icons are inlined SVG.
   ============================================================ */

:root {
  /* ---------- Brand core ---------- */
  --green:        #0E4F2D;   /* Primary  — CTAs, brand mark, highlights */
  --charcoal:     #414141;   /* Secondary/text — headings & body copy   */
  --gold:         #C89A33;   /* Accent   — sun, emphasis, sparingly      */

  /* ---------- Green scale (anchored on primary #0E4F2D = green-700) ---------- */
  --green-900:    #062B18;   /* deepest — dark sections, footer */
  --green-800:    #0A3D23;
  --green-700:    #0E4F2D;   /* = --green (primary brand) */
  --green-600:    #145537;   /* primary hover (a touch lighter) */
  --green-500:    #1F6E43;   /* brighter mid-green — icons / pops on light */
  --green-400:    #4E8D68;
  --green-300:    #7FAF90;
  --green-200:    #AECDB9;
  --green-100:    #D6E7DD;
  --green-50:     #EEF5F0;

  /* ---------- Gold scale (anchored on accent #C89A33) ---------- */
  --gold-700:     #836018;   /* deep ochre */
  --gold-600:     #A87F24;
  --gold-500:     #C89A33;   /* = --gold */
  --gold-300:     #E3C178;   /* light gold — text/accents on dark green */
  --gold-100:     #F1E4C2;
  --gold-50:      #FAF4E6;

  /* ---------- Neutrals ---------- */
  --ink:          #2B2B2B;   /* darkest text */
  --charcoal-700: #414141;   /* = --charcoal, primary text */
  --gray-600:     #6B6B6B;   /* secondary text */
  --gray-500:     #8A8A8A;   /* muted / captions */
  --gray-400:     #B5B5B5;   /* disabled */
  --gray-300:     #D8D8D8;   /* borders */
  --gray-200:     #E8E8E8;   /* dividers / hairlines */
  --gray-100:     #F2F2F0;   /* subtle surface fill */
  --off-white:    #FAFAF7;   /* page background */
  --white:        #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --bg:               var(--off-white);
  --bg-elevated:      var(--white);
  --bg-muted:         var(--gray-100);
  --bg-brand-soft:    var(--green-50);
  --bg-brand:         var(--green-500);
  --bg-dark:          var(--green-900);

  /* ---------- Semantic text ---------- */
  --text:             var(--charcoal-700);
  --text-strong:      var(--ink);
  --text-muted:       var(--gray-600);
  --text-on-brand:    var(--white);
  --text-on-dark:     #EAF3EA;
  --text-link:        var(--green-700);

  /* ---------- Borders / lines ---------- */
  --border:           var(--gray-300);
  --border-soft:      var(--gray-200);
  --border-brand:     var(--green-500);

  /* ---------- Status ---------- */
  --success:          var(--green-600);
  --warning:          var(--gold-600);
  --danger:           #D14343;
  --info:             #3A7BD5;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-primary:   "Verdana", "DejaVu Sans", "Inter", system-ui, sans-serif; /* headings — matches logo wordmark */
  --font-serif:     "Roboto", system-ui, Arial, sans-serif;/* accents / eyebrows / quotes (was Roboto Slab) */
  --font-text:      "Roboto", system-ui, Arial, sans-serif;/* body */
  --font-accent:    "Roboto", system-ui, Arial, sans-serif;/* labels / buttons (medium) */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.5rem;    /* 72 */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.12em;  /* uppercase eyebrow labels */

  /* ============================================================
     RADII / SHADOWS / SPACING
     ============================================================ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill:999px;

  --shadow-xs:  0 1px 2px rgba(46, 64, 44, 0.06);
  --shadow-sm:  0 2px 8px rgba(46, 64, 44, 0.08);
  --shadow-md:  0 8px 24px rgba(46, 64, 44, 0.10);
  --shadow-lg:  0 18px 48px rgba(46, 64, 44, 0.14);
  --shadow-brand:0 10px 30px rgba(14, 79, 45, 0.32);

  --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;

  --container: 1200px;
  --container-narrow: 820px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Use these classes (or copy the rules) for consistent type.
   ============================================================ */
.os-eyebrow {
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green-700);
}
.os-h1 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.os-h2 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.os-h3 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.os-h4 {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.os-serif {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--green-700);
}
.os-lead {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
.os-body {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--text);
}
.os-small {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.os-label {
  font-family: var(--font-accent);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
}