/* Go24Pro — Design Tokens
   Single source of truth extracted from repo + brand decisions (Apr 2026).
   Link this file from every preview/page. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@700;800&display=swap');

:root {
  /* ── BRAND PALETTE (geschlossen) ─────────────────────────────── */
  /* Farbe wird SEHR sparsam eingesetzt. Die Site ist monochrom schwarz-weiß.
     Grün lebt im Logo und in positiven Deltas. Blau nur für Inline-Text-Links. */
  --brand-blue:        #3396D1;  /* NUR für Text-Links (<a>) */
  --brand-blue-hover:  #2A7AB3;

  --action-green:      #77C04B;  /* Logo + positive Deltas + Success-Badges */
  --action-green-dark: #5FA33A;
  --action-green-50:   #EDF7E5;

  /* INK — matte black replaces the old navy */
  --ink:               #0A0A0A;  /* H1/H2/H3, Buttons primary */
  --ink-hover:         #1A1A1A;
  --ink-body:          #5A6B70;  /* Fließtext */
  --ink-meta:          #8A969A;  /* Captions, Labels */

  /* SURFACES */
  --canvas:            #FFFFFF;
  --surface:           #F4F7F9;  /* Section alternating bg */
  --surface-2:         #EEF2F3;  /* Inner splits */

  --border:            #E2E8EA;  /* Standard card border */
  --border-light:      #EEF2F3;

  --gold:              #D4A853;  /* Premium badges only */
  --gold-50:           #FBF5E8;
  --emergency:         #DC2626;  /* Errors, Notdienst */
  --emergency-50:      #FEF2F2;

  /* ── TYPE ─────────────────────────────────────────────────────── */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-logo:    'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale (1rem = 16px) */
  --fs-xs:   0.75rem;   /* 12 — micro labels */
  --fs-sm:   0.875rem;  /* 14 — captions, table */
  --fs-base: 1rem;      /* 16 — body */
  --fs-md:   1.125rem;  /* 18 — lead / card title */
  --fs-lg:   1.25rem;   /* 20 — H3 */
  --fs-xl:   1.5rem;    /* 24 — H2 section */
  --fs-2xl:  1.875rem;  /* 30 — H1 sub */
  --fs-3xl:  2.5rem;    /* 40 — hero */
  --fs-4xl:  3.25rem;   /* 52 — marketing hero */

  /* ── RADII ────────────────────────────────────────────────────── */
  --r-sm:  0.5rem;   /* 8  — chips, small inputs */
  --r-md:  0.625rem; /* 10 — compact cards, inputs */
  --r-lg:  0.75rem;  /* 12 — standard cards */
  --r-xl:  1rem;     /* 16 — feature cards */
  --r-2xl: 1.25rem;  /* 20 — hero shells */
  --r-full: 999px;

  /* ── SHADOWS (always neutral-black, never tinted) ─────────────── */
  --sh-card:      0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --sh-card-hov:  0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --sh-float:     0 8px 24px rgba(0,0,0,0.08);
  --sh-mega:      0 12px 40px rgba(0,0,0,0.12);
  --sh-btn-ink:   0 4px 14px rgba(0,0,0,0.15);
  --sh-inset:     inset 0 0 0 1px var(--border);

  /* ── SPACING (8-pt) ───────────────────────────────────────────── */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem;   --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;  --s-20: 5rem;  --s-24: 6rem;

  /* ── MOTION ───────────────────────────────────────────────────── */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-xs:  120ms;
  --dur-sm:  180ms;
  --dur-md:  260ms;
  --dur-lg:  420ms;
}

/* ── BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
p { margin: 0; color: var(--ink-body); }

/* Focus */
*:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }

/* Utility numbers */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }