/* ============================================================
   SOLAR PERSONAL BRAND — Design Tokens
   Visual DNA adapted from timkrasenbrink.de / Akquise.de
   Substituted Google Fonts in place of the originals.
   ============================================================ */

/* ---------- Webfonts (Google Fonts substitutes) ----------
   ORIGINAL (Tim Krasenbrink / Akquise.de — likely Framer-licensed):
     • Display sans     — appears to be Aeonik / GT America family
     • Display italic   — appears to be PP Editorial New Italic
     • Body sans        — same grotesque as display
   SUBSTITUTE (used in this design system, free + open):
     • Display sans     — "Geist"            (clean modern grotesque)
     • Display italic   — "Instrument Serif" (old-style italic with swashes)
     • Body sans        — "Inter Tight"      (high-x-height, readable)
   ⚠ Flag for the user: please share licensed font files if available; we'll
   drop them in /fonts and rewire @font-face accordingly.
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLOR TOKENS — base scale
     Anthracite + electric blue. Cool, professional, technical —
     fits Solarvertrieb better than the original forest-green DNA.
     Variable names (--green-*, --sun-*) are kept as stable
     ALIASES — only the values changed.
     ============================================================ */

  /* Blue (primary brand) — was named --green-*
     Brightened to a confident royal blue so primary CTAs read as
     visibly "blue" rather than near-black navy. */
  --green-900: #061538;   /* navy-black */
  --green-800: #0C2055;   /* deep section BG */
  --green-700: #122C78;   /* texture BG */
  --green-600: #1E4FB0;   /* PRIMARY brand blue — display + CTA */
  --green-500: #3568CF;   /* hover */
  --green-400: #5F87DD;   /* muted icon */
  --green-200: #B0C2E8;   /* soft border on dark surfaces */
  --green-50:  #EBF0FB;   /* hover tint on light surfaces */

  /* Aliases (preferred for new code) */
  --brand-900: var(--green-900);
  --brand-800: var(--green-800);
  --brand-700: var(--green-700);
  --brand-600: var(--green-600);
  --brand-500: var(--green-500);
  --brand-400: var(--green-400);
  --brand-200: var(--green-200);
  --brand-50:  var(--green-50);

  /* Anthracite — kept as a deep neutral for footers / 2nd dark surface */
  --anthracite-900: #060912;
  --anthracite-800: #0E1422;
  --anthracite-700: #141C2D;
  --anthracite-600: #1B2436;

  /* Neutrals — cool, paper-feeling */
  --paper:      #FDFDFD;  /* default page bg */
  --cream:      #F1F3F7;  /* alternating section bg, card surface (cool mist) */
  --cream-2:    #E5E9EF;  /* divider tone */
  --line:       #DDE1E8;  /* 1px dividers on mist */
  --line-cool:  #E6E8EC;  /* 1px dividers on paper */
  --mist:       var(--cream);
  --mist-2:     var(--cream-2);

  /* Ink (text on light) */
  --ink:           #0E1322;
  --ink-2:         #3A4254;
  --ink-3:         #6A7282;
  --ink-disabled:  #A8AEB8;

  /* Reverse (text on anthracite) */
  --on-dark:    #F1F3F7;
  --on-dark-2:  #C2C9D6;
  --on-dark-3:  #858E9F;

  /* Electric / solar blue — accent (was --sun-*)
     Use for: stat highlights, hyperlink scribble, KPI rings,
     occasional inverse CTA on light surface. */
  --sun-500:    #2E5BE8;   /* accent blue */
  --sun-400:    #5A7DEE;
  --sun-100:    #D6E1FC;
  --sun-50:     #EEF3FE;

  /* Aliases */
  --blue-500: var(--sun-500);
  --blue-400: var(--sun-400);
  --blue-100: var(--sun-100);
  --blue-50:  var(--sun-50);

  /* Semantic — cooler family to fit the new blue/anthracite mood */
  --success:    #1E7F5A;
  --warning:    #B97F1A;
  --danger:     #C0392B;
  --info:       #2E5BE8;

  /* ============================================================
     SEMANTIC SURFACE TOKENS
     Use these in components — never reach for the raw scale.
     ============================================================ */
  --bg-page:       var(--paper);
  --bg-alt:        var(--cream);
  --bg-inverse:    var(--green-600);
  --bg-inverse-2:  var(--green-800);
  --bg-card:       var(--paper);
  --bg-card-cream: var(--cream);

  /* ============================================================
     BACKGROUND-SYSTEM — 4 abgestimmte Section-Themes
     Used by .section--paper, .section--mist, .section--cool, .section--deep
     ============================================================ */
  /* Theme-Töne enger zusammen gerückt — weniger Kontrast = sanftere Übergänge */
  --bg-paper:     #FDFDFE;
  --bg-paper-2:   #FAFBFD;     /* leichte Mist-Variante */
  --bg-mist:      #F6F9FD;     /* kühl-paper, ganz leicht blau */
  --bg-mist-2:    #F0F4FA;     /* Tiefe für mist-gradient */
  --bg-cool:      #EDF2FA;     /* gedämpfter Blau-Tint */
  --bg-cool-2:    #E3EAF5;     /* Tiefe für cool-gradient */
  --bg-deep:      #061538;     /* CTA dark */
  --bg-deep-2:    #03081E;     /* Footer noch dunkler */

  /* Hairline-Übergangs-Tones (Bleed) — mit Mid-Stop für sanftere Kurven */
  --bleed-paper-mist: linear-gradient(180deg,
      var(--bg-paper) 0%,
      color-mix(in oklab, var(--bg-paper), var(--bg-mist) 55%) 55%,
      var(--bg-mist) 100%);
  --bleed-mist-cool:  linear-gradient(180deg,
      var(--bg-mist) 0%,
      color-mix(in oklab, var(--bg-mist), var(--bg-cool) 60%) 60%,
      var(--bg-cool) 100%);
  --bleed-cool-paper: linear-gradient(180deg,
      var(--bg-cool) 0%,
      color-mix(in oklab, var(--bg-cool), var(--bg-paper) 55%) 55%,
      var(--bg-paper) 100%);
  --bleed-mist-paper: linear-gradient(180deg,
      var(--bg-mist) 0%,
      color-mix(in oklab, var(--bg-mist), var(--bg-paper) 60%) 60%,
      var(--bg-paper) 100%);
  --bleed-paper-deep: linear-gradient(180deg,
      var(--bg-paper) 0%,
      color-mix(in oklab, var(--bg-paper), var(--bg-deep) 60%) 70%,
      var(--bg-deep) 100%);
  --bleed-cool-deep:  linear-gradient(180deg,
      var(--bg-cool) 0%,
      color-mix(in oklab, var(--bg-cool), var(--bg-deep) 65%) 75%,
      var(--bg-deep) 100%);

  /* ============================================================
     GRADIENT-PALETTE — zentrale Quelle für alle Verläufe.
     Wird in styles.css überall referenziert, damit der Look
     konsistent bleibt und an einer Stelle steuerbar ist.
     ============================================================ */

  /* RGB-Triplets (für rgb(var(--xx) / α)-Komposition)
     ACCENT umgestellt: Gold → Electric Cyan (#22D3EE / #06B6D4).
     Variablen-Namen --rgb-gold / --gold-XX bleiben als ALIASES für
     stabile Referenzen — der Wert dahinter ist jetzt aber Cyan.
     Cool-only Palette: Navy + Brand-Blau + Cyan. */
  --rgb-gold:    34 211 238;     /* #22D3EE  cyan-400 (accent) */
  --rgb-gold-2:  6 182 212;      /* #06B6D4  cyan-500 (deeper) */
  --rgb-blue:    46 91 232;
  --rgb-blue-2:  90 125 238;
  --rgb-navy:    11 26 71;
  --rgb-deep:    6 21 56;
  --rgb-ink:     14 19 34;
  --rgb-paper:   253 253 253;

  /* Accent-Alphas — feste Stufen, damit Highlights nicht „springen" */
  --gold-04:  rgb(var(--rgb-gold) / 0.04);
  --gold-08:  rgb(var(--rgb-gold) / 0.08);
  --gold-12:  rgb(var(--rgb-gold) / 0.12);
  --gold-18:  rgb(var(--rgb-gold) / 0.18);
  --gold-24:  rgb(var(--rgb-gold) / 0.24);
  --gold-32:  rgb(var(--rgb-gold) / 0.32);
  --gold-45:  rgb(var(--rgb-gold) / 0.45);
  --gold-60:  rgb(var(--rgb-gold) / 0.6);
  --gold-80:  rgb(var(--rgb-gold) / 0.8);
  --gold:     rgb(var(--rgb-gold) / 1);

  /* Semantische Aliase (für neuen Code) */
  --rgb-accent: var(--rgb-gold);
  --accent-04:  var(--gold-04);
  --accent-08:  var(--gold-08);
  --accent-12:  var(--gold-12);
  --accent-18:  var(--gold-18);
  --accent-24:  var(--gold-24);
  --accent-32:  var(--gold-32);
  --accent-45:  var(--gold-45);
  --accent-60:  var(--gold-60);
  --accent-80:  var(--gold-80);
  --accent-100: var(--gold);

  /* Blue-Alphas — gleiches Schema */
  --blue-04:  rgb(var(--rgb-blue) / 0.04);
  --blue-08:  rgb(var(--rgb-blue) / 0.08);
  --blue-12:  rgb(var(--rgb-blue) / 0.12);
  --blue-18:  rgb(var(--rgb-blue) / 0.18);
  --blue-24:  rgb(var(--rgb-blue) / 0.24);
  --blue-32:  rgb(var(--rgb-blue) / 0.32);

  /* Named Gradients (Tools/Recipes — überall wiederverwendbar) */

  /* Hauptakzent — Blau ins Gold, knackiger Solar-Verlauf
     (für Progress-Bars, Connector, primäre Highlight-Linien) */
  --grad-solar: linear-gradient(90deg,
      rgb(var(--rgb-blue))   0%,
      rgb(var(--rgb-blue-2)) 45%,
      rgb(var(--rgb-gold))   100%);

  /* Sun — warmer Glow für Cards/Badges (radial) */
  --grad-sun: radial-gradient(circle at 50% 50%,
      rgb(var(--rgb-gold) / 0.35) 0%,
      rgb(var(--rgb-gold) / 0.10) 45%,
      transparent 75%);

  /* Sky — kühler Blau-Glow */
  --grad-sky: radial-gradient(circle at 50% 50%,
      rgb(var(--rgb-blue) / 0.20) 0%,
      rgb(var(--rgb-blue) / 0.06) 45%,
      transparent 75%);

  /* Aurora — diffuser Premium-Glow (Hero, Hintergrund) */
  --grad-aurora: radial-gradient(80% 60% at 20% 10%, rgb(var(--rgb-blue) / 0.14) 0%, transparent 60%),
                 radial-gradient(70% 60% at 90% 20%, rgb(var(--rgb-gold) / 0.10) 0%, transparent 60%),
                 radial-gradient(60% 50% at 50% 95%, rgb(var(--rgb-blue) / 0.08) 0%, transparent 65%);

  /* Frost — Card-Hintergrund auf hellem Theme (subtiler Glas-Verlauf) */
  --grad-frost: linear-gradient(155deg,
      rgb(var(--rgb-paper) / 0.85) 0%,
      rgb(var(--rgb-paper) / 0.55) 55%,
      rgb(var(--rgb-blue) / 0.04) 100%);

  /* Deep — Navy-Verlauf für Dark-Sections */
  --grad-deep: linear-gradient(180deg,
      var(--bg-deep) 0%,
      color-mix(in oklab, var(--bg-deep), #000 40%) 100%);

  /* Deep-Aurora — innere Glühungen für CTA-Section auf Dark */
  --grad-deep-aurora:
      radial-gradient(70% 60% at 15% 20%, rgb(var(--rgb-blue) / 0.22) 0%, transparent 60%),
      radial-gradient(60% 55% at 85% 80%, rgb(var(--rgb-gold) / 0.14) 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep-2) 100%);

  /* Dotted-Grid Pattern — als reusable Background-Layer */
  --pattern-dots-light: radial-gradient(rgb(var(--rgb-navy) / 0.035) 1px, transparent 1px) 0 0 / 22px 22px repeat;
  --pattern-dots-mid:   radial-gradient(rgb(var(--rgb-navy) / 0.05)  1px, transparent 1px) 0 0 / 22px 22px repeat;
  --pattern-dots-dark:  radial-gradient(rgb(var(--rgb-paper) / 0.06) 1px, transparent 1px) 0 0 / 22px 22px repeat;

  /* Per-Theme Text-Farben — explizit für Klarheit */
  --text-on-paper:        var(--ink);
  --text-on-paper-muted:  var(--ink-2);
  --text-on-paper-subtle: var(--ink-3);
  --text-on-mist:         var(--ink);
  --text-on-mist-muted:   var(--ink-2);
  --text-on-cool:         var(--ink);
  --text-on-cool-muted:   var(--ink-2);
  --text-on-deep:         #F5F7FB;
  --text-on-deep-muted:   #B6C2DC;
  --text-on-deep-subtle:  #8290B1;

  --fg:            var(--ink);
  --fg-muted:      var(--ink-2);
  --fg-subtle:     var(--ink-3);
  --fg-on-inverse: var(--on-dark);
  --fg-on-inverse-muted: var(--on-dark-2);

  --border:        var(--line-cool);
  --border-cream:  var(--line);
  --border-inverse: rgba(246, 242, 234, 0.18);

  --accent:        var(--green-600);
  --accent-hover:  var(--green-500);
  --accent-press:  var(--green-700);
  --accent-on:     var(--on-dark);

  --sun:           var(--sun-500);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display: "Geist", "Aeonik", "GT America", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-italic:  "Instrument Serif", "PP Editorial New", "Times New Roman", Georgia, serif;
  --font-body:    "Inter Tight", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.250 major-third, tuned for display-heavy layouts) */
  --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:   60px;
  --fs-5xl:   80px;
  --fs-6xl:   112px;

  /* Line heights */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.14em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;
  --s-40:  160px;

  /* Layout */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1280px;
  --gutter:           24px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    18px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-pill:  999px;

  /* ============================================================
     BORDERS
     ============================================================ */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ============================================================
     SHADOWS — soft, paper-feeling. No long sci-fi drop shadows.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(14, 19, 34, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 19, 34, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(14, 19, 34, 0.12);
  --shadow-lg: 0 24px 48px -16px rgba(14, 19, 34, 0.18);
  --shadow-soft-portrait: 0 30px 80px -30px rgba(6, 9, 18, 0.45); /* used behind hero photo */
  --ring-focus: 0 0 0 3px rgba(46, 91, 232, 0.28);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   420ms;

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-nav:     50;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   120;
}

/* ============================================================
   SEMANTIC TEXT STYLES
   Apply these classes directly, OR compose your own using the
   tokens above.
   ============================================================ */

.display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(56px, 7vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
}
.display .em, .h-display .em,
.em-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(36px, 4.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(28px, 3.2vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--accent);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

p, .p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  margin: 0;
}
.p-lg, .lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.p-sm, .caption {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

.code, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.93em;
  background: var(--cream);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--ink);
}

/* The signature handwritten underline used under emphasized phrases */
.sig-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.sig-underline::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -0.18em;
  height: 0.42em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 12, 120 6 S 180 4, 198 9' fill='none' stroke='%230B1A47' stroke-width='2' stroke-linecap='round' opacity='0.85'/></svg>") center/100% 100% no-repeat;
  pointer-events: none;
  /* anthracite tint */
  filter: invert(10%) sepia(20%) saturate(900%) hue-rotate(190deg) brightness(85%) contrast(95%);
}
.sig-underline.on-dark::after {
  /* cool cream */
  filter: invert(96%) sepia(6%) saturate(160%) hue-rotate(190deg) brightness(101%) contrast(91%);
}
.sig-underline.sun::after,
.sig-underline.blue::after {
  /* electric blue */
  filter: invert(28%) sepia(94%) saturate(1860%) hue-rotate(218deg) brightness(95%) contrast(94%);
}

/* Smooth defaults */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}