/* ============================================================
   Energieautomation Rasel — Foundations
   Colors + Type tokens (base + semantic)
   Schriften lokal selbst gehostet (DSGVO-freundlich).
   ============================================================ */

/* Saira Condensed — primäre Markenschrift (lokal, latin subset).
   JetBrains Mono — monospace Begleitschrift (lokal, variabel). */
@font-face { font-family:'Saira Condensed'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/SairaCondensed-300.woff2') format('woff2'); }
@font-face { font-family:'Saira Condensed'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/SairaCondensed-400.woff2') format('woff2'); }
@font-face { font-family:'Saira Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/SairaCondensed-500.woff2') format('woff2'); }
@font-face { font-family:'Saira Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/SairaCondensed-600.woff2') format('woff2'); }
@font-face { font-family:'Saira Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/SairaCondensed-700.woff2') format('woff2'); }
@font-face { font-family:'Saira Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/SairaCondensed-800.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url('../fonts/JetBrainsMono.woff2') format('woff2'); }

:root {
  /* ----- Brand ----- */
  --brand-orange:        #F28E19;        /* Primary brand — sampled from logo */
  --brand-orange-600:    #DA7E11;        /* Hover/press */
  --brand-orange-700:    #B86808;
  --brand-orange-100:    #FCE6CA;        /* Tint surface */
  --brand-orange-50:     #FFF6EB;        /* Lightest tint */

  --brand-black:         #0E0E0E;        /* Wordmark black */
  --brand-leaf:          #2F8F4E;        /* Sustainability accent (subtle) */

  /* ----- Neutral scale (warm-leaning) ----- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF8;
  --neutral-100: #F4F3EF;
  --neutral-200: #E7E5DF;
  --neutral-300: #D2CFC6;
  --neutral-400: #A8A49A;
  --neutral-500: #76736B;
  --neutral-600: #4F4D47;
  --neutral-700: #34322E;
  --neutral-800: #1F1E1C;
  --neutral-900: #0E0E0E;

  /* ----- Semantic foreground ----- */
  --fg-1:        var(--neutral-900);     /* primary text */
  --fg-2:        var(--neutral-700);     /* secondary text */
  --fg-3:        var(--neutral-500);     /* tertiary, captions */
  --fg-4:        var(--neutral-400);     /* placeholder, disabled */
  --fg-on-brand: #FFFFFF;                /* text on orange */
  --fg-link:     var(--brand-orange-700);

  /* ----- Semantic background ----- */
  --bg-1:        var(--neutral-0);       /* page */
  --bg-2:        var(--neutral-50);      /* subtle section */
  --bg-3:        var(--neutral-100);     /* card on bg-2, hover */
  --bg-inverse:  var(--neutral-900);
  --bg-tint:     var(--brand-orange-50); /* brand-tinted surfaces */

  /* ----- Borders ----- */
  --border-1:    var(--neutral-200);
  --border-2:    var(--neutral-300);
  --border-strong: var(--neutral-700);

  /* ----- Status ----- */
  --success:     #2F8F4E;
  --success-bg:  #E8F4EC;
  --warning:     #E6A20A;
  --warning-bg:  #FDF4DD;
  --danger:      #C7321F;
  --danger-bg:   #FAE7E3;
  --info:        #2960B8;
  --info-bg:     #E3ECF8;

  /* ----- Energy class colors (German Energieausweis A+ → H) ----- */
  --ec-aplus: #008B47;
  --ec-a:     #43A047;
  --ec-b:     #8BC34A;
  --ec-c:     #CDDC39;
  --ec-d:     #FFEB3B;
  --ec-e:     #FFC107;
  --ec-f:     #FF9800;
  --ec-g:     #FF5722;
  --ec-h:     #D32F2F;

  /* ----- Type families ----- */
  --font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ----- Type scale ----- */
  --fs-display:  clamp(2.5rem, 5vw, 4.25rem);
  --fs-h1:       clamp(2rem, 3.6vw, 3rem);
  --fs-h2:       clamp(1.5rem, 2.4vw, 2rem);
  --fs-h3:       1.375rem;
  --fs-h4:       1.125rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-caption:  0.75rem;
  --fs-eyebrow:  0.75rem;

  /* ----- Line heights ----- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* ----- Letter spacing ----- */
  --ls-tight:   -0.02em;
  --ls-display: -0.025em;
  --ls-eyebrow:  0.12em;

  /* ----- Spacing (8pt-ish, with 4 micro) ----- */
  --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;

  /* ----- Radii ----- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ----- Shadows ----- */
  --shadow-1: 0 1px 2px rgba(14,14,14,.04), 0 1px 1px rgba(14,14,14,.03);
  --shadow-2: 0 2px 6px rgba(14,14,14,.06), 0 1px 2px rgba(14,14,14,.04);
  --shadow-3: 0 8px 24px rgba(14,14,14,.08), 0 2px 6px rgba(14,14,14,.04);
  --shadow-4: 0 24px 48px rgba(14,14,14,.12), 0 8px 16px rgba(14,14,14,.06);
  --shadow-brand: 0 8px 24px rgba(242,142,25,.25);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.6);

  /* ----- Motion ----- */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ----- Layout ----- */
  --container: 1200px;
  --container-narrow: 760px;
}

/* ============================================================
   Semantic element styles — base layer
   ============================================================ */

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

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.display-light {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-orange-700);
}

p, .p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); margin: 0 0 var(--space-4); }
.lead { font-size: 1.125rem; color: var(--fg-2); line-height: var(--lh-base); }
small, .small { font-size: var(--fs-small); color: var(--fg-3); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }

a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-orange); }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }