/* ============================================================
   Verdor — ZENTRALE FARB- UND DESIGN-PALETTE
   Einzige Quelle der Wahrheit für Farben, Typografie, Abstände.
   Herkunft der vier Basisfarben: images/website-design-references/Color Palette.png
   ============================================================ */
:root {
  /* --- Basisfarben aus der Palette --- */
  --brand-brown:  #524646;
  --brand-sage:   #A8A492;
  --brand-cream:  #FCF2E5;
  --brand-orange: #EC5B38;

  /* --- Dunkle Töne (aus brand-brown abgeleitet) --- */
  --ink-900: #1C1817;
  --ink-850: #221D1C;
  --ink-800: #2B2422;
  --ink-700: #3A3130;
  --ink-600: #524646;
  --ink-500: #6B5D5B;

  /* --- Helle Töne --- */
  --cream-50:  #FFFBF5;
  --cream-100: #FCF2E5;
  --cream-200: #F3E7D6;
  --paper:     #FFFFFF;

  /* --- Sage / Sekundär --- */
  --sage-200: #D6D4C8;
  --sage-300: #C2BFAF;
  --sage-500: #A8A492;
  --sage-700: #7E7A6B;

  /* --- Akzent: ausschliesslich für Call-to-Action --- */
  --accent:       #EC5B38;
  --accent-hover: #D2492A;
  --accent-press: #B93C20;
  --accent-soft:  rgba(236, 91, 56, 0.12);
  --accent-line:  rgba(236, 91, 56, 0.35);

  /* --- Semantik --- */
  --text-on-dark:        var(--cream-100);
  --text-on-dark-muted:  rgba(252, 242, 229, 0.62);
  --text-on-light:       var(--ink-800);
  --text-on-light-muted: #6F615E;
  --hairline-dark:  rgba(252, 242, 229, 0.14);
  --hairline-light: rgba(82, 70, 70, 0.16);

  /* --- Typografie --- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-eyebrow: 12px;
  --fs-small:   14px;
  --fs-body:    17px;
  --fs-lead:    20px;
  --fs-h3:      24px;
  --fs-h2:      44px;
  --fs-h1:      68px;
  --fs-display: 96px;

  --lh-tight: 1.02;
  --lh-head:  1.08;
  --lh-body:  1.62;
  --ls-eyebrow: 0.22em;
  --ls-head: -0.025em;

  /* --- Abstände --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* --- Form --- */
  --r-btn: 2px;
  --r-card: 4px;
  --r-field: 2px;
  --shadow-card: 0 1px 2px rgba(28,24,23,.05), 0 12px 32px -12px rgba(28,24,23,.18);
  --shadow-lift: 0 2px 4px rgba(28,24,23,.06), 0 28px 56px -20px rgba(28,24,23,.30);
  --shadow-cta:  0 10px 28px -10px rgba(236,91,56,.55);

  /* --- Bewegung --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .45s;

  /* --- Layout --- */
  --wrap: 1200px;
  --nav-h: 92px;
  --gutter: 64px;
}