/* ============================================================
   FINANZSICHERER — Colors & Type
   The brand foundation. Reuse these tokens; do not invent new
   colors or fonts when assembling pages.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Black&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- BRAND COLORS (per finanzsicherer_farben.docx) ---------- */

  /* Dunkelblau — Primärfarbe. Hintergründe, Headlines.
     Always paired with white text. */
  --fs-dunkelblau: #002641;
  --fs-dunkelblau-rgb: 0 38 65;

  /* Lavendel — Sekundärakzent. Trennelemente, Übergänge.
     NEVER as text color on white. */
  --fs-lavendel: #B2B2E8;
  --fs-lavendel-rgb: 178 178 232;

  /* Cyan — CTA + Highlight. Buttons, Links, Icons. */
  --fs-cyan: #09ABFF;
  --fs-cyan-rgb: 9 171 255;

  /* Weiß — text on dark, light backgrounds. */
  --fs-weiss: #FFFFFF;

  /* ---------- DERIVED / TONAL STEPS ---------- */
  /* Tints of dunkelblau for hierarchy on dark grounds */
  --fs-dunkelblau-90: #1a3d56;
  --fs-dunkelblau-80: #33536b;
  --fs-dunkelblau-60: #6680a0;
  --fs-dunkelblau-40: #99accc;

  /* Tints of lavendel for surfaces, hover, soft fills */
  --fs-lavendel-50: #e0e0f5;   /* very soft surface */
  --fs-lavendel-25: #f0f0fa;   /* whisper background */
  --fs-lavendel-150: #8a8ad0;  /* deeper accent */

  /* Cyan states */
  --fs-cyan-hover: #00a0f5;    /* slightly darker on hover */
  --fs-cyan-press: #0089d6;    /* deeper on press */
  --fs-cyan-soft: #e0f3ff;     /* tinted background */

  /* Neutrals — warm-cool grays toward dunkelblau */
  --fs-ink: #002641;
  --fs-ink-2: #324d63;        /* secondary text on light */
  --fs-ink-3: #5e7585;        /* tertiary text */
  --fs-line: #d8dde3;         /* hairlines */
  --fs-line-soft: #ebeef2;    /* softer divider */
  --fs-bg: #ffffff;
  --fs-bg-alt: #f6f7f9;       /* page-section alt */
  --fs-bg-dunkel: #002641;

  /* ---------- SEMANTIC ROLES ---------- */
  --fg-1: var(--fs-ink);          /* primary text on light */
  --fg-2: var(--fs-ink-2);        /* secondary text on light */
  --fg-3: var(--fs-ink-3);        /* tertiary / meta */
  --fg-on-dark: var(--fs-weiss);  /* text on dunkelblau */
  --fg-on-dark-2: rgb(255 255 255 / 0.72);
  --fg-on-dark-3: rgb(255 255 255 / 0.52);

  --bg-1: var(--fs-bg);
  --bg-2: var(--fs-bg-alt);
  --bg-dark: var(--fs-bg-dunkel);
  --bg-soft: var(--fs-lavendel-25);

  --accent: var(--fs-cyan);
  --accent-hover: var(--fs-cyan-hover);
  --accent-press: var(--fs-cyan-press);

  --border: var(--fs-line);
  --border-soft: var(--fs-line-soft);

  /* Status (derived; not in source palette — use sparingly) */
  --status-success: #1eb980;
  --status-warning: #f5a623;
  --status-danger:  #e5484d;

  /* ---------- TYPOGRAPHY ---------- */
  /* Display: Archivo Black — tight, condensed-feel grotesk that
     mirrors the bold compressed wordmark of the logo.
     Body/UI: Archivo (400–700).
     System fallback: Inter, then -apple-system. */
  --font-display: "Archivo Black", "Archivo", "Inter", system-ui, sans-serif;
  --font-sans:    "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type scale — desktop-first; pages can scale via container queries */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;
  --text-6xl:  120px;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---------- SPACING / RADII / SHADOW ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* Soft, low-noise shadows. Brand reads "trust" — keep elevation gentle. */
  --shadow-1: 0 1px 2px rgb(0 38 65 / 0.06), 0 1px 1px rgb(0 38 65 / 0.04);
  --shadow-2: 0 6px 16px -4px rgb(0 38 65 / 0.10), 0 2px 4px rgb(0 38 65 / 0.05);
  --shadow-3: 0 18px 40px -12px rgb(0 38 65 / 0.18), 0 6px 12px -4px rgb(0 38 65 / 0.08);
  --shadow-pop: 0 22px 48px -16px rgb(9 171 255 / 0.35);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in:  cubic-bezier(.6,.05,.8,.2);
  --ease-spring: cubic-bezier(.5,1.6,.4,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes (or copy the rules) for consistent text.
   ============================================================ */

.fs-display-1, .fs-h0 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 7.2vw, var(--text-6xl));
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-transform: lowercase;
}

.fs-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, var(--text-4xl));
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  text-transform: lowercase;
}

.fs-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, var(--text-3xl));
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.fs-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.fs-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.fs-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-cyan);
}

.fs-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg-2);
}

.fs-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg-1);
}

.fs-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-2);
}

.fs-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.fs-link {
  color: var(--fs-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.fs-link:hover { color: var(--fs-cyan-press); }

/* On-dark variants */
.on-dark .fs-h1, .on-dark .fs-h2, .on-dark .fs-h3, .on-dark .fs-h4,
.on-dark .fs-display-1, .on-dark .fs-body { color: var(--fg-on-dark); }
.on-dark .fs-lead, .on-dark .fs-body-sm { color: var(--fg-on-dark-2); }
.on-dark .fs-meta { color: var(--fg-on-dark-3); }