/* FRESH Rechner — Mobile-first design tokens
   Mobile-first: viewport units, large tap targets, single-column flows.
   Desktop is a refinement layer. */

/* Inter and Plus Jakarta Sans: self-hosted in fonts/fonts.css (loaded by the layout) */

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  /* FRESH mint/green */
  --mint-50:  #effdf4;
  --mint-100: #d6fbe2;
  --mint-200: #b0f4c9;
  --mint-300: #7be9a7;
  --mint-400: #45d782;
  --mint-500: #1fbe65;
  --mint-600: #14a056;
  --mint-700: #117f47;
  --mint-800: #11653b;
  --mint-900: #0e5333;

  --citrus-100: #fff7ce;
  --citrus-200: #ffedaa;
  --citrus-300: #ffe48a;
  --citrus-400: #ffd24c;
  --citrus-500: #f5b400;
  --citrus-700: #8a5a00;
  --coral-500: #ff5a4e;

  --ink-950: #0a1410;
  --ink-900: #0f1d18;
  --ink-700: #2a3b34;
  --ink-500: #5b6b65;
  --ink-400: #7e8c87;
  --ink-300: #b6c1bd;
  --ink-200: #d9e0dd;
  --ink-100: #ecf0ee;
  --ink-50:  #f6f8f7;
  --paper:   #ffffff;

  --bg:        #eef6f0;          /* the homepage's background (hub/fresh-web --wash) */
  --surface:   var(--paper);
  --surface-2: var(--mint-50);
  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-500);
  --fg-faint:  var(--ink-400);
  --border:    var(--ink-200);
  --border-strong: var(--ink-300);
  --accent:    var(--mint-500);
  --accent-h:  var(--mint-600);

  --r-sm: 10px;
  --r:    14px;
  --r-md: 18px;
  --r-cta: 14px; /* @kind radius — CTA / action buttons (less rounded than the pill) */
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(15, 29, 24, 0.04);
  --sh-sm: 0 1px 3px rgba(15, 29, 24, 0.06), 0 1px 2px rgba(15, 29, 24, 0.04);
  --sh:    0 6px 16px -4px rgba(15, 29, 24, 0.08), 0 2px 4px rgba(15, 29, 24, 0.04);
  --sh-md: 0 14px 30px -8px rgba(15, 29, 24, 0.12), 0 4px 8px rgba(15, 29, 24, 0.05);
  --sh-lg: 0 30px 60px -20px rgba(15, 29, 24, 0.18), 0 8px 16px rgba(15, 29, 24, 0.06);
  --sh-mint: 0 12px 30px -6px rgba(31, 190, 101, 0.45);
  --sh-mint-deep: 0 18px 40px -8px rgba(31, 190, 101, 0.55);
  /* Primary card resting shadow — crisp hairline contact + soft ambient */
  --sh-card: 0 1px 2px rgba(15, 29, 24, 0.04), 0 10px 28px -14px rgba(15, 29, 24, 0.12);
  /* Selected-chip shadow — quieter than --sh-mint, for small controls */
  --sh-mint-soft: 0 6px 18px -6px rgba(31, 190, 101, 0.35);
  /* Selection halo ring, combine with a shadow: box-shadow: var(--sh-mint-soft), var(--ring-mint) */
  --ring-mint: 0 0 0 3px rgba(31, 190, 101, 0.16);
  /* Inset top highlight for filled mint chips (gives a subtle 3D press surface) */
  --chip-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.22);

  /* Selected-state for choice controls (chips, segments, yes/no).
     Deliberately NOT the filled CTA gradient — the solid mint fill is reserved
     for action buttons (Weiter etc.) so selections never look like the CTA. */
  --sel-bg: var(--mint-100);
  --sel-fg: var(--mint-800);
  --sel-border: var(--mint-600);

  /* Brand gradients */
  --grad-hero: linear-gradient(138deg, #24cf72 0%, var(--mint-600) 52%, var(--mint-800) 100%); /* @kind gradient */
  --grad-chip: linear-gradient(180deg, var(--mint-500), var(--mint-600)); /* @kind gradient */
  --grad-accent: linear-gradient(90deg, var(--mint-400), var(--citrus-400)); /* @kind gradient — the FRESH tick */
  --grad-hairline: linear-gradient(90deg, transparent, var(--ink-200) 18%, var(--ink-200) 82%, transparent); /* @kind gradient — soft divider */

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur: 220ms; /* @kind other */

  /* Mobile-first sizing */
  --tap-min: 48px;        /* WCAG-friendly tap target */
  --gutter: 20px;         /* horizontal page padding (mobile) */
  --content-max: 560px;   /* single-column max */
  --maxw: 1180px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
  /* prevent ios bounce overscroll bg flash */
  overscroll-behavior-y: none;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
/* Tactile press feedback everywhere; inline transforms (if any) still win over this. */
button:not(:disabled):active { transform: scale(0.98); }
button:focus-visible { outline: 3px solid color-mix(in oklab, var(--mint-500), white 50%); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--mint-500) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-500), white 70%) !important;
  outline: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Decorative bg */
.frog-bg {
  background:
    radial-gradient(900px 600px at 110% -10%, rgba(31, 190, 101, 0.10), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(255, 210, 76, 0.10), transparent 60%),
    var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
}

/* utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* fade */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-8deg); }
  25% { transform: rotate(12deg); }
  40% { transform: rotate(-6deg); }
  55% { transform: rotate(8deg); }
  70% { transform: rotate(0deg); }
}
/* Check indicator entrance on selection (use with --ease-bounce) */
@keyframes checkPop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
/* Ambient float for the hero frog — slow, subtle */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}