/*
  tokens.css — Jarvis Motion Kit, reusable theme + timing layer (DIGA-1109 spec §1.1 / §2)
  Load AFTER styles.css. One :root block = one theme; swap this file per client, keep motion-engine.js unchanged.
*/

:root{
  /* --- §1.1 house-easing timing tokens (identical across every theme) --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-micro: 0.25s;
  --dur-base: 0.6s;

  /* --- §2 V1 "Energiespectrum" theme block --- */
  --font-display: 'General Sans', 'Inter', 'Open Sans', system-ui, sans-serif;
  --spectrum-ramp: linear-gradient(90deg, #0B8A46, #7FBF3F, #F2C230, #EF8B2C, #E4572E);
  --transition-accent: var(--green-600, #077D3F);
}

/* Typography — elevate to award-tier scale/faces; body keeps tabular nums for prices + reg numbers. */
/* DIGA-5153: no body{font-family} here — it fought styles.css's body rule at equal
   specificity, so whichever <link> loaded last (order varies per page) won, shifting
   the header CTA's width. styles.css:body is the sole owner of body font-family now. */
h1, h2, h3, h4, .font-display{ font-family: var(--font-display); }
.amount, .kwh, [data-count-up]{ font-variant-numeric: tabular-nums; }
h1{ font-size: clamp(2.6rem, 6vw, 5rem); }
h2{ font-size: clamp(2rem, 4vw, 3rem); }

/* Micro-interactions */
.btn{ will-change: transform; }
.magnetic{ transition: transform var(--dur-micro) var(--ease-soft); }

/* Underline-wipe for inline text links */
.link{ position: relative; }
.link::after{
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: currentColor;
  transition: right var(--dur-micro) var(--ease-soft);
}
.link:hover::after, .link:focus-visible::after{ right: 0; }

/* Sticky header compact-on-scroll (§1.2 B) */
.site-header{ transition: padding var(--dur-micro) var(--ease-soft); }
.site-header.is-compact .nav{ height: var(--header-h, 72px); }

@media (prefers-reduced-motion: reduce){
  .btn, .magnetic, .link::after, .site-header{ transition: none !important; }
}