/* ─────────────────────────────────────────────
   Ampeers Energy — Colors & Typography Tokens
   Source: Brand Book (Ampeers Energy Brand Guidelines)
   ───────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────── */
@font-face {
  font-family: "Rubik";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Rubik-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Rubik-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Rubik-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Rubik-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Rubik-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Bold.ttf") format("truetype");
}

:root {
  /* ── Core-Farben (Brand core palette) ──────── */
  --ae-wald:    #012921; /* Forest — primary brand / ink. CMYK 97/0/19/83 */
  --ae-stein:   #F7F5F2; /* Stone — warm off-white canvas. CMYK 3/3/5/0 */
  --ae-luft:    #DFEBEB; /* Air — cool pale teal. CMYK 15/2/6/0 */
  --ae-energie: #C7F860; /* Energy — signature lime accent. CMYK 28/0/80/0 */

  /* ── Erweiterte Palette (Extended) ────────── */
  --ae-flamme: #FC4F00; /* Flame — sparingly, ≤15% of a static layout */
  --ae-tau:    #E7FCBC; /* Dew — soft lime support */

  /* ── Working shades (derived, internal use) ── */
  --ae-wald-80: #345651;
  --ae-wald-60: #678482;
  --ae-wald-40: #9BB2B0;
  --ae-wald-20: #CDD8D8;
  --ae-stein-hi: #FFFFFF;   /* card white on stein */
  --ae-stein-deep: #ECE8E1; /* stein border / divider */
  --ae-stein-border: #DCDAD8;
  --ae-energie-deep: #81BB08; /* hover / icon-on-energie contrast */
  --ae-flamme-soft: #FF915F;

  /* ── Semantic colors ───────────────────────── */
  --ae-bg:          var(--ae-stein);
  --ae-bg-card:     var(--ae-stein-hi);
  --ae-bg-inverse:  var(--ae-wald);
  --ae-bg-accent:   var(--ae-energie);

  --ae-fg:          var(--ae-wald);        /* primary ink */
  --ae-fg-muted:    var(--ae-wald-60);     /* secondary copy */
  --ae-fg-subtle:   var(--ae-wald-40);     /* metadata, labels */
  --ae-fg-inverse:  var(--ae-stein);       /* on wald */
  --ae-fg-on-accent: var(--ae-wald);        /* on energie */

  --ae-border:       var(--ae-stein-border);
  --ae-border-strong: var(--ae-wald);
  --ae-divider:      rgba(1, 41, 33, 0.12);

  --ae-accent:        var(--ae-energie);
  --ae-accent-strong: var(--ae-wald);
  --ae-danger:        var(--ae-flamme);
  --ae-support:       var(--ae-luft);

  --ae-shadow-sm: 0 1px 2px rgba(1, 41, 33, 0.06);
  --ae-shadow-md: 0 4px 16px rgba(1, 41, 33, 0.08);
  --ae-shadow-lg: 0 12px 40px rgba(1, 41, 33, 0.12);

  /* ── Radii ─────────────────────────────────── */
  --ae-radius-xs: 4px;
  --ae-radius-sm: 8px;
  --ae-radius-md: 10px;   /* standard card radius from brand book */
  --ae-radius-lg: 20px;   /* photo card radius */
  --ae-radius-xl: 30px;   /* hero container radius */
  --ae-radius-pill: 999px;

  /* ── Spacing (4-pt base) ───────────────────── */
  --ae-space-1: 4px;
  --ae-space-2: 8px;
  --ae-space-3: 12px;
  --ae-space-4: 16px;
  --ae-space-5: 24px;
  --ae-space-6: 32px;
  --ae-space-7: 40px;
  --ae-space-8: 56px;
  --ae-space-9: 80px;
  --ae-space-10: 120px;

  /* ── Typography families ───────────────────── */
  --ae-font-display: "Rubik", "Inter", system-ui, -apple-system, sans-serif;
  --ae-font-body:    "Inter", "Rubik", system-ui, -apple-system, sans-serif;

  /* ── Type scale (from brand book: Rubik for
     headlines, Inter for body. Use Rubik Light +
     Inter Regular, OR Rubik Medium + Inter Medium
     together — match weights.) ──────────────── */
  --ae-fs-display: 120px; /* page-opener 2.x numerals */
  --ae-fs-h1: 68px;       /* special headlines, Rubik Medium */
  --ae-fs-h2: 50px;       /* section titles, Rubik Regular/Light */
  --ae-fs-h3: 36px;
  --ae-fs-h4: 28px;
  --ae-fs-h5: 23px;       /* body-large (brand book body) */
  --ae-fs-body: 16px;
  --ae-fs-small: 15px;
  --ae-fs-overline: 13px;

  --ae-lh-tight: 1.05;
  --ae-lh-heading: 1.15;
  --ae-lh-body: 1.5;
  --ae-lh-loose: 1.65;

  --ae-track-display: -0.01em; /* Rubik letterSpacing from fig */
  --ae-track-body: 0;
  --ae-track-overline: 0.08em;
}

/* ── Base element styles ─────────────────────── */
html, body {
  background: var(--ae-bg);
  color: var(--ae-fg);
  font-family: var(--ae-font-body);
  font-size: var(--ae-fs-body);
  line-height: var(--ae-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.ae-display, .ae-h1, .ae-h2, .ae-h3, .ae-h4 {
  font-family: var(--ae-font-display);
  color: var(--ae-fg);
  letter-spacing: var(--ae-track-display);
  line-height: var(--ae-lh-heading);
  font-weight: 400;   /* Rubik Regular is the default headline weight */
  margin: 0;
}

.ae-display {
  font-size: var(--ae-fs-display);
  line-height: 1.04;
  font-weight: 400;
}
.ae-h1, h1 {
  font-size: var(--ae-fs-h1);
  font-weight: 500; /* Rubik Medium for "Special Headlines" */
  line-height: 1.1;
}
.ae-h2, h2 {
  font-size: var(--ae-fs-h2);
  font-weight: 400;
  line-height: 1.1;
}
.ae-h3, h3 { font-size: var(--ae-fs-h3); font-weight: 500; }
.ae-h4, h4 { font-size: var(--ae-fs-h4); font-weight: 500; }
.ae-h5, h5 { font-size: var(--ae-fs-h5); font-family: var(--ae-font-body); font-weight: 400; line-height: 1.5; }

p, .ae-body {
  font-family: var(--ae-font-body);
  font-size: var(--ae-fs-body);
  line-height: var(--ae-lh-body);
  color: var(--ae-fg);
  margin: 0;
}
.ae-body-lg { font-size: var(--ae-fs-h5); line-height: 1.52; }
.ae-body-sm { font-size: var(--ae-fs-small); line-height: 1.5; }

.ae-overline {
  font-family: var(--ae-font-body);
  font-size: var(--ae-fs-overline);
  font-weight: 700;
  letter-spacing: var(--ae-track-overline);
  text-transform: uppercase;
  color: var(--ae-fg-muted);
}

.ae-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
}

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ae-wald-80); }

::selection { background: var(--ae-energie); color: var(--ae-wald); }