/* Formento – tokens.css – Design Tokens gemäß Brand Style Guide v1.0 / Umsetzungsbriefing */
:root {
  /* Farben */
  --color-navy: #071629;
  --color-blue: #2563EB;
  --color-pale-blue: #EFF6FF;
  --color-off-white: #F8FAFC;
  --color-graphite: #334155;
  --color-steel: #64748B;
  --color-border: #CBD5E1;
  --color-white: #FFFFFF;
  --color-error: #B91C1C;
  --color-success: #15803D;

  /* Abstände (8-Punkt-Raster) */
  --space-1: 0.5rem;   /* 8 px */
  --space-2: 1rem;     /* 16 px */
  --space-3: 1.5rem;   /* 24 px */
  --space-4: 2rem;     /* 32 px */
  --space-5: 3rem;     /* 48 px */
  --space-6: 4rem;     /* 64 px */
  --space-7: 6rem;     /* 96 px */

  /* Radius */
  --radius-control: 8px;
  --radius-card: 12px;

  /* Layout */
  --container-width: 1280px;
  --text-width: 760px;
  --header-height: 72px;
  --header-height-mobile: 64px;

  /* Sonstiges */
  --shadow-subtle: 0 8px 24px rgba(7, 22, 41, 0.08);
  --transition-fast: 150ms ease;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-roman.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-graphite);
  background: var(--color-white);
}

h1, .h1 { font-size: clamp(2.25rem, 4vw, 2.75rem); line-height: 1.18; font-weight: 700; color: var(--color-navy); }
h2, .h2 { font-size: clamp(1.75rem, 3vw, 2rem); line-height: 1.25; font-weight: 700; color: var(--color-navy); }
h3, .h3 { font-size: 1.5rem; line-height: 1.33; font-weight: 600; color: var(--color-navy); }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-2);
}
.eyebrow--on-dark { color: #9DC0FB; }

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-graphite);
  max-width: var(--text-width);
}

p { max-width: var(--text-width); }
p + p { margin-top: var(--space-2); }

a { color: var(--color-blue); }
a:hover { text-decoration: underline; }