/* =========================================================
   ratgebern.de – Design Tokens "Petrol"
   Self-contained: keine externen Fonts/Icons. Variablennamen
   identisch zum glp1-Theme, damit layout.blade + portal.css greifen.
   ========================================================= */
:root {
  /* ---------- BRAND (Petrol) ---------- */
  --brand-50:  #e6f2f2;
  --brand-100: #c6e0e0;
  --brand-200: #9bcccc;
  --brand-300: #6fb3b3;
  --brand-500: #1a8a8a;
  --brand-600: #0f6e6e;
  --brand-700: #0c5a5a;
  --brand-800: #094646;
  --brand-900: #063333;
  --brand-950: #032020;

  /* ---------- ACCENT (warmes Bernstein als Signal/CTA-Kontrast) ---------- */
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-700: #b45309;

  /* ---------- NEUTRAL (kuehl) ---------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7fafa;
  --neutral-100: #eef3f3;
  --neutral-200: #dde6e6;
  --neutral-300: #c4d0d0;
  --neutral-400: #93a3a3;
  --neutral-500: #6a7a7a;
  --neutral-600: #495757;
  --neutral-700: #374343;
  --neutral-800: #222c2c;
  --neutral-900: #121a1a;

  /* ---------- SLATE (dunkle Flaechen/Footer) ---------- */
  --slate-800: #10201f;
  --slate-900: #0b1817;

  /* ---------- FEEDBACK ---------- */
  --danger-50:  #fdf2f2;
  --danger-600: #b42318;
  --warning-50: #fdf6ec;
  --warning-600: #a15c07;

  /* ---------- SEMANTIC ---------- */
  --color-bg:               var(--neutral-50);
  --color-surface:          var(--neutral-0);
  --color-surface-muted:    var(--neutral-100);
  --color-surface-inverse:  var(--slate-900);
  --color-surface-inverse-raised: var(--slate-800);
  --color-surface-highlight: var(--amber-400);
  --color-accent:           var(--amber-500);

  --color-text:             var(--neutral-900);
  --color-text-muted:       var(--neutral-600);
  --color-text-subtle:      var(--neutral-500);
  --color-text-inverse:     #eef3f3;
  --color-text-inverse-muted: #a9bcbc;

  --color-border:           var(--neutral-200);
  --color-border-strong:    var(--neutral-300);
  --color-border-inverse:   rgba(255,255,255,.14);

  --color-primary:          var(--brand-600);
  --color-primary-text:     var(--brand-700);
  --color-action:           var(--brand-700);
  --color-action-hover:     var(--brand-800);
  --color-on-action:        #ffffff;
  --color-primary-subtle:   var(--brand-50);
  --color-price:            var(--brand-600);
  --color-focus:            rgba(15,110,110,.40);

  /* ---------- TYPOGRAFIE (System-Fonts, keine externen Requests) ---------- */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --text-h1:      clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --text-h2:      clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem);
  --text-h3:      clamp(1.25rem, 1.12rem + .5vw, 1.5rem);
  --text-h4:      1.125rem;
  --text-lead:    clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --text-article: 1.125rem;
  --text-body:    1rem;
  --text-sm:      .875rem;
  --text-xs:      .75rem;
  --text-price:   clamp(1.5rem, 1.35rem + .5vw, 1.75rem);

  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --section-y: clamp(64px, 5vw + 40px, 128px);

  /* ---------- RADIUS ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---------- SHADOW ---------- */
  --shadow-xs: 0 1px 2px rgba(15,30,30,.06);
  --shadow-sm: 0 1px 3px rgba(15,30,30,.08), 0 1px 2px rgba(15,30,30,.04);
  --shadow-md: 0 6px 16px -4px rgba(15,30,30,.10), 0 2px 4px rgba(15,30,30,.04);
  --shadow-lg: 0 20px 48px -16px rgba(15,30,30,.22);
  --shadow-focus: 0 0 0 3px var(--color-focus);

  /* ---------- LAYOUT ---------- */
  --container-max: 1180px;
  --container-text: 720px;
  --container-pad: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- MOTION ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(.2,0,0,1);

  /* ---------- Z-INDEX ---------- */
  --z-sticky: 10;
  --z-header: 50;
  --z-overlay: 80;
  --z-cookie: 100;
}

[data-grundton="weiss"] {
  --color-bg: var(--neutral-0);
  --color-surface: var(--neutral-0);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-primary-text); text-underline-offset: 3px; }
a:hover { color: var(--brand-800); }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }