/* ============================================================
   Chantraine & Ganser - Brand Tokens (v1)
   Stand: 2026-05-10
   Quelle der Wahrheit: marketing/brand/BRAND.md

   Bei CD-Updates: erst hier aendern, dann in alle LPs nachziehen.
   In Astro-Projekten (cg-website): als globale CSS-Variablen
   importieren oder als CSS-Module-File einbinden.
   ============================================================ */

:root {
  /* ===== Primaerfarben ===== */
  --cg-blue: #1e3e6b;          /* CG-Tiefblau (Hauptfarbe Text/Primaer) */
  --cg-teal: #00a19a;          /* CG-Meergruen (Highlights/Sekundaer) */
  --cg-lime: #d4dc59;          /* CG-Limettengruen (Akzent/CTAs) */

  /* ===== Tonabstufungen ===== */
  --cg-blue-deep: #142a4a;     /* Headlines, Strong */
  --cg-text: #2a2a2a;          /* Body-Schwarz (nicht reines Schwarz) */

  /* ===== Reserve-Tokens ===== */
  --cg-warmwhite: #f5f2ec;     /* Cremeton, Reserve */

  /* ===== Marken-Verlauf in Stufen ===== */
  --cg-gradient-100: linear-gradient(135deg, #1e3e6b 0%, #00a19a 100%);
  --cg-gradient-50:  linear-gradient(135deg, rgba(30,62,107,0.50), rgba(0,161,154,0.50));
  --cg-gradient-20:  linear-gradient(135deg, rgba(30,62,107,0.20), rgba(0,161,154,0.20));
  --cg-gradient-08:  linear-gradient(135deg, rgba(30,62,107,0.08), rgba(0,161,154,0.08));

  /* ===== Typografie ===== */
  --cg-font-body:    "PT Sans", -apple-system, system-ui, sans-serif;
  --cg-font-display: "Fraunces", Georgia, serif;

  /* Schriftgroessen (16px Base) */
  --cg-text-small: 16px;       /* Footnote, sekundaer */
  --cg-text-body:  18px;       /* Standard */
  --cg-text-lead:  22px;       /* Sub-Headlines mit Wirkung */
  --cg-text-h5:    28px;
  --cg-text-h4:    32px;
  --cg-text-h3:    40px;
  --cg-text-h2:    48px;
  --cg-text-h1:    64px;

  /* Line-Heights */
  --cg-lh-tight:   1.15;
  --cg-lh-base:    1.50;
  --cg-lh-relaxed: 1.70;

  /* ===== Spacing-Skala (8px Base) ===== */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ===== Brand-Element-Form (Pille TL+BR rund, TR+BL eckig) ===== */
  --cg-shape-pill: 23% 0 23% 0 / 50% 0 50% 0;

  /* ===== Container ===== */
  --cg-container: 1200px;
  --cg-container-narrow: 720px;

  /* ===== Buttons ===== */
  --cg-btn-radius: var(--cg-shape-pill);
  --cg-btn-padding: var(--space-3) var(--space-6);
}

/* ===== Base ===== */
body {
  font-family: var(--cg-font-body);
  font-size: var(--cg-text-body);
  line-height: var(--cg-lh-base);
  color: var(--cg-text);
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--cg-font-display);
  font-weight: 600;
  line-height: var(--cg-lh-tight);
  color: var(--cg-blue-deep);
  margin: 0 0 var(--space-4) 0;
}

h1 { font-size: var(--cg-text-h1); }
h2 { font-size: var(--cg-text-h2); }
h3 { font-size: var(--cg-text-h3); }
h4 { font-size: var(--cg-text-h4); }
h5 { font-size: var(--cg-text-h5); }

p { margin: 0 0 var(--space-4) 0; }

a {
  color: var(--cg-teal);
  text-decoration: underline;
}

/* ===== Lime-CTA-Button (Brand-Hauptelement) ===== */
.cg-btn {
  display: inline-block;
  font-family: var(--cg-font-body);
  font-size: var(--cg-text-body);
  font-weight: 700;
  background: var(--cg-lime);
  color: var(--cg-blue-deep);
  padding: var(--cg-btn-padding);
  border: none;
  border-radius: var(--cg-btn-radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 220, 89, 0.4);
}