/* ────────────────────────────────────────────────────────────────────────────
 * Fastlancer design tokens — single source of truth.
 *
 * Generated 2026-06-24 from design-audit/03-proposed-tokens.md.
 * If you add a hard-coded color / font-size / radius in a component <style>
 * block, you are creating drift. Use the token instead.
 *
 * - Colors: 22 tokens replace 119 hex values
 * - Type scale: 13 sizes (12–48 px), all whole-pixel on a 2-step grid
 * - Radii: 5 stops (2 / 6 / 10 / 14 / 9999)
 * - Weights: 4 (400 / 500 / 600 / 700)
 * - Line heights: 4 (1.15 / 1.25 / 1.5 / 1.65)
 *
 * See design-audit/03-proposed-tokens-rationale.md for the "why" of each value.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────── */
  --c-brand-dark: #001a2f;
  --c-brand-dark-hover: #00253f;
  /* Logo-Blau der Bildmarke (Favicon #0061B2) — seit 25.09.2026 fuer Hover/aktiv der
     Kategorie-Reiter und Akzente im Menue (Justus: „unser Brand-Blau"). Kein CTA-Blau. */
  --c-brand-blue: #0061b2;
  --c-brand-blue-tint: rgba(0, 97, 178, 0.1);
  --c-accent: #c5fb3b;
  --c-accent-hover: #b8f020;
  --c-accent-tint: #f6fcdc;
  --c-accent-text: #1a2e05;

  /* ── Surfaces (3 tiers) ─────────────────────────────────────────────── */
  --c-surface-canvas: #ffffff;
  --c-surface-page: #f5f5f5;
  --c-surface-subtle: #f7f9fc;

  /* ── Grey scale (6 stops) ───────────────────────────────────────────── */
  --c-gray-100: #f3f4f6;
  --c-gray-200: #e5e7eb;
  --c-gray-300: #d1d5db;
  --c-gray-400: #9ca3af; /* icons only — WCAG fails as text */
  --c-gray-500: #6b7280; /* secondary body text (4.83:1 AA) */
  --c-gray-700: #374151;

  /* ── Status (round-2 anchors) ───────────────────────────────────────── */
  --c-success: #15803d;
  --c-success-tint: #d1fae5;
  --c-warning: #b45309;
  --c-warning-tint: #fef3c7;
  --c-error: #b91c1c;
  --c-error-tint: #fecaca;

  /* ── Type scale (px) ────────────────────────────────────────────────── */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-15: 15px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 40px;
  --text-7xl: 48px;

  /* ── Font weights ───────────────────────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Line heights ───────────────────────────────────────────────────── */
  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ── Border radius ──────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* ── Box shadow (round-2 cleanup; provisional values) ───────────────── */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
  --shadow-md: rgba(0, 0, 0, 0.18) 0px 6px 20px 0px;
  --shadow-image-outline: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  --shadow-accent-glow: 0 12px 32px -4px rgba(197, 251, 59, 0.45);
}