/* ==========================================================================
   VOLL GmbH — Colors & Typography Tokens
   Based on the official VOLL Corporate Design.
   ========================================================================== */

/* Brand fonts — both families loaded from local TTFs in fonts/ */
@font-face {
  font-family: "Maven Pro";
  src: url("fonts/MavenPro-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand palette (verbatim from corporate design) -------------------- */
  --voll-hellblau:   #0085bf;  /* Überschriften — headings, links, accent */
  --voll-dunkelblau: #002e5c;  /* Hintergründe + Überschriften — primary brand */
  --voll-magenta:    #c7066e;  /* Besondere Elemente — highlight / CTA */
  --voll-gelb:       #fbb900;  /* Besondere Elemente — highlight / warning */
  --voll-gold:       #af944d;  /* Sonderfarbe — premium accent */
  --voll-schwarz:    #000d1b;  /* Schrift — body ink */
  --voll-weiss:      #ffffff;  /* Hintergrund / Schrift */

  /* ---- Extended tints & shades (derived, OKLCH-harmonized) --------------- */
  --voll-dunkelblau-900: #00264d;
  --voll-dunkelblau-800: #002e5c; /* brand */
  --voll-dunkelblau-700: #003f7a;
  --voll-dunkelblau-600: #00579e;

  --voll-hellblau-700: #006a99;
  --voll-hellblau-600: #0085bf; /* brand */
  --voll-hellblau-500: #23a1db;
  --voll-hellblau-400: #5cbde8;
  --voll-hellblau-200: #b8e0f3;
  --voll-hellblau-100: #e2f1f9;
  --voll-hellblau-050: #f3f9fc;

  --voll-magenta-600: #c7066e; /* brand */
  --voll-magenta-500: #e02a88;
  --voll-magenta-100: #fbe1ee;

  --voll-gelb-600: #fbb900; /* brand */
  --voll-gelb-500: #ffc933;
  --voll-gelb-100: #fff1cc;

  --voll-gold-600: #af944d; /* brand */
  --voll-gold-100: #efe8d6;

  /* ---- Neutrals (cool, aligned with dunkelblau) ------------------------- */
  --voll-ink:       #000d1b;
  --voll-ink-soft:  #0e2133;
  --voll-ash-900:   #1a2a3d;
  --voll-ash-700:   #394d66;
  --voll-ash-500:   #6b7d94;
  --voll-ash-300:   #b7c2d1;
  --voll-ash-200:   #d7dee8;
  --voll-ash-100:   #eef1f6;
  --voll-ash-050:   #f7f9fc;
  --voll-paper:     #ffffff;

  /* ---- Semantic foreground / background --------------------------------- */
  --fg-1: var(--voll-ink);          /* primary body text */
  --fg-2: var(--voll-ash-700);      /* secondary text */
  --fg-3: var(--voll-ash-500);      /* muted / captions */
  --fg-inverse: var(--voll-weiss);
  --fg-brand: var(--voll-dunkelblau);
  --fg-accent: var(--voll-hellblau);
  --fg-link: var(--voll-hellblau);
  --fg-link-hover: var(--voll-dunkelblau);

  --bg-1: var(--voll-weiss);        /* default background */
  --bg-2: var(--voll-ash-050);      /* section alt */
  --bg-3: var(--voll-ash-100);      /* subtle card / input */
  --bg-brand: var(--voll-dunkelblau);
  --bg-brand-soft: var(--voll-hellblau-050);
  --bg-accent: var(--voll-hellblau);

  /* ---- Status (derived, brand-compatible) ------------------------------- */
  --status-success: #1f9d55;
  --status-warning: var(--voll-gelb);
  --status-danger:  var(--voll-magenta);
  --status-info:    var(--voll-hellblau);

  /* ---- Type families ---------------------------------------------------- */
  --font-display: "Maven Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, monospace;

  /* ---- Type scale ------------------------------------------------------- */
  --fs-display: clamp(2.75rem, 4.5vw + 1rem, 4.5rem); /* 44 → 72 */
  --fs-h1: clamp(2rem, 2.8vw + 1rem, 3rem);            /* 32 → 48 */
  --fs-h2: clamp(1.625rem, 1.6vw + 1rem, 2.25rem);     /* 26 → 36 */
  --fs-h3: 1.5rem;    /* 24 */
  --fs-h4: 1.25rem;   /* 20 */
  --fs-h5: 1.0625rem; /* 17 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem;    /* 16 */
  --fs-sm: 0.875rem;  /* 14 */
  --fs-xs: 0.75rem;   /* 12 */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* ---- Weights ---------------------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Spacing (4px scale) --------------------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (cool, blue-tinted) ------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 46, 92, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 46, 92, 0.08);
  --shadow-md: 0 6px 18px rgba(0, 46, 92, 0.10);
  --shadow-lg: 0 16px 40px rgba(0, 46, 92, 0.14);
  --shadow-xl: 0 28px 70px rgba(0, 46, 92, 0.18);
  --shadow-focus: 0 0 0 3px rgba(0, 133, 191, 0.35);

  /* ---- Borders --------------------------------------------------------- */
  --border-1: 1px solid var(--voll-ash-200);
  --border-2: 1px solid var(--voll-ash-300);
  --border-strong: 1px solid var(--voll-dunkelblau);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;

  /* ---- Layout ---------------------------------------------------------- */
  --container-narrow: 720px;
  --container: 1140px;
  --container-wide: 1320px;
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */

html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-brand);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-accent); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--voll-hellblau);
}

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: var(--fw-bold); color: var(--fg-brand); }
em { font-style: italic; }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

hr { border: 0; border-top: var(--border-1); margin: var(--sp-8) 0; }

::selection { background: var(--voll-hellblau); color: var(--voll-weiss); }