/*
Theme Name: VertragsPartner
Author: i-finance
Description: Schlankes, hand-codiertes Custom-Theme für die VertragsPartner-Website. Kein Builder.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: vertragspartner
*/

/* ============================================================
   DESIGN TOKENS — Quelle der Wahrheit: assets/design-system
   ============================================================ */
:root {
  /* Brand */
  --vp-blue: #0079C2;
  --vp-blue-700: #0066A8;
  --vp-green: #6FB52C;
  --vp-green-700: #4E8A12;
  --vp-ink: #17171F;
  --vp-navy: #11294D;

  /* Gradient */
  --vp-gradient: linear-gradient(135deg, #007BC4 0%, #1C8FAE 32%, #3FA64B 64%, #76B82A 100%);
  --vp-gradient-dark: linear-gradient(135deg, #3DA8E8 0%, #42B6C2 34%, #A2C617 100%);

  /* Neutrals */
  --vp-body: #3A3A46;
  --vp-text-grey: #5E6472;
  --vp-muted: #9AA0AD;
  --vp-white: #FFFFFF;
  --vp-surface: #F7F8FA;
  --vp-surface-soft: #EEF0F4;
  --vp-page-bg: #F2F3F6;

  /* Tints */
  --vp-blue-tint: #EAF4FB;
  --vp-green-tint: #EEF6E5;

  /* Borders */
  --vp-border: #E6E8EE;
  --vp-border-soft: #F0F1F5;
  --vp-border-line: #DADCE3;

  /* Radii */
  --radius-pill: 10px;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-2xl: 10px;
  --radius-starter: 16px;

  /* Shadows */
  --shadow-cta: 0 10px 24px rgba(0,121,194,0.26);
  --shadow-card: 0 8px 22px rgba(20,30,60,0.05);
  --shadow-card-hover: 0 14px 34px rgba(20,30,60,0.12);
  --shadow-starter: 0 24px 70px rgba(17,41,77,0.10);
  --shadow-soft: 0 12px 34px rgba(17,41,77,0.06);

  /* Motion */
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* Layout */
  --container-max: 1180px;
  --container-pad: 40px;

  /* Typography */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--vp-body);
  background:
    radial-gradient(circle at 14% 10%, rgba(0,121,194,.08), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(111,181,44,.09), transparent 22%),
    linear-gradient(180deg, #fff 0%, #fbfdff 50%, #f5f8fb 100%);
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { display: block; }
a { color: inherit; text-decoration: none; }

.page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--container-pad) 60px;
}