/* =========================================================
   ECHD Consulting – Homepage · Design Tokens
   Material-Sprache: Silber/Metallic · Beton · Glas · Holz
   Navy als Vertrauensanker · Gold sparsam (nur primäre CTAs)
   Aufbauend auf dem ECHD-CI (Einheitlich-CI v1.11)
   ========================================================= */

:root{
  /* ── Navy – Vertrauensanker ─────────────────────────── */
  --navy-900:#08152E;   /* tiefstes Dunkel, Headlines, Footer */
  --navy-800:#0B1F4B;   /* primäre Markenfarbe */
  --navy-700:#122560;   /* Hover, Akzentflächen */
  --navy-600:#1A3280;   /* sekundäre Flächen */
  --navy-500:#27407F;
  --navy-400:#4A67A8;   /* Subtext auf Dunkel */
  --navy-200:#B8C6E0;

  /* ── Silber / Metallic – Leitmaterial ───────────────── */
  --steel-50:#F6F8FA;
  --steel-100:#ECEFF3;
  --steel-200:#DCE0E7;
  --steel-300:#C6CCD5;   /* Metall-Kante */
  --steel-400:#A7AFBC;
  --steel-500:#878F9D;
  --steel-600:#6A7280;   /* dunkler Stahl */
  --steel-700:#4C525E;

  /* ── Beton – warme Grautöne ─────────────────────────── */
  --concrete-50:#F3F2EF;
  --concrete-100:#E9E7E2;   /* helle Betonfläche */
  --concrete-200:#DCD9D2;
  --concrete-300:#C7C3BA;
  --concrete-700:#534F49;   /* dunkler Beton */
  --concrete-900:#2C2A27;

  /* ── Holz – warmer Akzent (sparsam) ─────────────────── */
  --wood-400:#C28E5B;
  --wood-500:#A9743F;
  --wood-600:#8A5C30;

  /* ── Gold – CTA-Signal (ausschließlich) ─────────────── */
  --gold:#F5C200;
  --gold-400:#FFD233;
  --gold-600:#D4A800;

  /* ── Status / Funktion ──────────────────────────────── */
  --success:#1A8F5C;
  --success-soft:#E8F6EE;
  --danger:#C42B2B;
  --danger-soft:#FBECEC;

  /* ── Text ───────────────────────────────────────────── */
  --ink:#0B1F4B;        /* Headlines auf hell */
  --text:#3D4759;       /* Fließtext auf hell */
  --muted:#6A7280;
  --line:#DCDAD4;       /* Trennlinien auf Beton/hell */
  --line-steel:#D7DCE3;

  /* ── Flächen ────────────────────────────────────────── */
  --white:#FFFFFF;
  --paper:#FAFAF8;      /* leicht warmes Weiß (Beton-Nähe) */

  /* ── Metallische Verläufe (Helfer) ──────────────────── */
  --sheen-silver:linear-gradient(135deg,#FFFFFF 0%,#E2E6EC 22%,#B9C0CB 48%,#EDF0F4 70%,#AEB6C2 100%);
  --sheen-steel:linear-gradient(160deg,#C9CFD8 0%,#9AA2AF 40%,#D8DCE3 60%,#7E8693 100%);
  --sheen-gold:linear-gradient(135deg,#FFE17A 0%,#F5C200 45%,#D4A800 100%);
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,rgba(0,0,0,.03) 1px 2px);
  --hairline-steel:linear-gradient(90deg,transparent,var(--steel-300) 18%,var(--steel-300) 82%,transparent);

  /* ── Maße ───────────────────────────────────────────── */
  --container:1180px;
  --container-wide:1320px;
  --radius:18px;
  --radius-lg:22px;
  --radius-sm:12px;
  --radius-pill:999px;

  /* ── Schatten ───────────────────────────────────────── */
  --shadow-sm:0 2px 8px rgba(8,21,46,.06);
  --shadow-card:0 14px 40px -22px rgba(8,21,46,.30);
  --shadow:0 24px 60px -28px rgba(8,21,46,.40);
  --shadow-metal:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -24px rgba(8,21,46,.45);

  /* ── Typografie ─────────────────────────────────────── */
  --font:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;

  /* ── Bewegung ───────────────────────────────────────── */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.16s var(--ease);
  --t:.26s var(--ease);
}