/**
 * Geisler & Schambach — Design Tokens
 * Version 1.0 · basierend auf CD Manual v1 (15.02.2026)
 *
 * Drop-in: <link rel="stylesheet" href="design-tokens.css">
 * Niemals Werte hier ändern. Immer als var(--gs-*) referenzieren.
 */

:root {
  /* ─── Farbpalette (4 Markenfarben) ──────────────────────────────── */
  --gs-color-black:   #000000;
  --gs-color-white:   #ffffff;
  --gs-color-gray:    #e3e6e6;
  --gs-color-metal:   #4f6b7b;   /* Primärfarbe */

  /* Tints (gemäß Manual: 70/50/20 % gegen Weiß) */
  --gs-color-metal-70: color-mix(in srgb, var(--gs-color-metal) 70%, white);
  --gs-color-metal-50: color-mix(in srgb, var(--gs-color-metal) 50%, white);
  --gs-color-metal-20: color-mix(in srgb, var(--gs-color-metal) 20%, white);

  --gs-color-gray-70:  color-mix(in srgb, var(--gs-color-gray) 70%, white);
  --gs-color-gray-50:  color-mix(in srgb, var(--gs-color-gray) 50%, white);
  --gs-color-gray-20:  color-mix(in srgb, var(--gs-color-gray) 20%, white);

  --gs-color-black-70: color-mix(in srgb, var(--gs-color-black) 70%, white);
  --gs-color-black-50: color-mix(in srgb, var(--gs-color-black) 50%, white);
  --gs-color-black-20: color-mix(in srgb, var(--gs-color-black) 20%, white);

  /* Semantische Aliase */
  --gs-bg-primary:    var(--gs-color-white);
  --gs-bg-secondary:  var(--gs-color-gray);
  --gs-bg-inverted:   var(--gs-color-metal);
  --gs-bg-contrast:   var(--gs-color-black);

  --gs-text-primary:   var(--gs-color-black);
  --gs-text-secondary: var(--gs-color-metal);
  --gs-text-inverted:  var(--gs-color-white);
  --gs-text-muted:     var(--gs-color-black-50);

  --gs-accent:        var(--gs-color-metal);

  /* ─── Typografie ────────────────────────────────────────────────── */
  --gs-font-family: 'GeneralSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gs-fw-light:     300;
  --gs-fw-regular:   400;
  --gs-fw-medium:    500;
  --gs-fw-semibold:  600;
  --gs-fw-bold:      700;

  /* Hierarchie (Manual S. 8) */
  --gs-text-h1-size:        2.75rem;   /* 44 px */
  --gs-text-h1-lh:          3.375rem;  /* 54 px */
  --gs-text-h1-weight:      var(--gs-fw-medium);
  --gs-text-h1-tracking:    -0.01em;

  --gs-text-h2-size:        1.75rem;   /* 28 px */
  --gs-text-h2-lh:          2.25rem;   /* 36 px */
  --gs-text-h2-weight:      var(--gs-fw-medium);
  --gs-text-h2-tracking:    -0.005em;

  --gs-text-body-size:      1.375rem;  /* 22 px */
  --gs-text-body-lh:        2.125rem;  /* 34 px */
  --gs-text-body-weight:    var(--gs-fw-regular);

  --gs-text-cta-size:       1.625rem;  /* 26 px */
  --gs-text-cta-lh:         1.2;
  --gs-text-cta-weight:     var(--gs-fw-medium);

  --gs-text-label-size:     0.875rem;  /* 14 px */
  --gs-text-label-tracking: 0.08em;

  --gs-text-caption-size:   0.9375rem; /* 15 px */
  --gs-text-caption-lh:     1.5;

  /* ─── Spacing (4-px-Grid) ───────────────────────────────────────── */
  --gs-space-1: 0.25rem;   /*  4 */
  --gs-space-2: 0.5rem;    /*  8 */
  --gs-space-3: 1rem;      /* 16 */
  --gs-space-4: 1.5rem;    /* 24 */
  --gs-space-5: 2rem;      /* 32 */
  --gs-space-6: 3rem;      /* 48 */
  --gs-space-7: 4rem;      /* 64 */
  --gs-space-8: 6rem;      /* 96 */

  /* ─── Layout ────────────────────────────────────────────────────── */
  --gs-container-max:    min(90vw, 1700px);
  --gs-container-narrow: 760px;
  --gs-content-measure:  72ch;

  /* ─── Borders & Radii ───────────────────────────────────────────── */
  --gs-radius-none: 0;
  --gs-radius-sm:   2px;
  --gs-radius-md:   4px;

  --gs-border-hairline: 1px solid color-mix(in srgb, var(--gs-color-black) 10%, transparent);
  --gs-border-divider:  1px solid var(--gs-color-gray);

  /* ─── Schatten (dezent) ─────────────────────────────────────────── */
  --gs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --gs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ─── Motion ────────────────────────────────────────────────────── */
  --gs-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --gs-duration-1:  120ms;
  --gs-duration-2:  240ms;
  --gs-duration-3:  400ms;
}

/* ─── Inverted Theme (für Sektionen auf Metall-Grau oder Schwarz) ── */
.gs-theme-dark {
  --gs-bg-primary:     var(--gs-color-metal);
  --gs-bg-secondary:   var(--gs-color-black);
  --gs-text-primary:   var(--gs-color-white);
  --gs-text-secondary: var(--gs-color-gray);
  --gs-text-muted:     color-mix(in srgb, var(--gs-color-white) 70%, transparent);
  --gs-accent:         var(--gs-color-white);
  --gs-border-divider: 1px solid color-mix(in srgb, var(--gs-color-white) 15%, transparent);
}

.gs-theme-contrast {
  --gs-bg-primary:     var(--gs-color-black);
  --gs-bg-secondary:   var(--gs-color-metal);
  --gs-text-primary:   var(--gs-color-white);
  --gs-text-secondary: var(--gs-color-gray);
  --gs-text-muted:     color-mix(in srgb, var(--gs-color-white) 60%, transparent);
  --gs-accent:         var(--gs-color-white);
}

/* ─── Responsive Skalierung (Manual: Proportionen erhalten) ─────── */
@media (max-width: 1024px) {
  :root {
    --gs-text-h1-size: 2.5rem;  /* 40 */
    --gs-text-h1-lh:   3rem;
    --gs-text-h2-size: 1.5rem;  /* 24 */
    --gs-text-h2-lh:   2rem;
    --gs-text-body-size: 1.25rem; /* 20 */
    --gs-text-body-lh:   1.875rem;
    --gs-text-cta-size:  1.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --gs-text-h1-size: 2.125rem; /* 34 */
    --gs-text-h1-lh:   2.625rem;
    --gs-text-h2-size: 1.375rem; /* 22 */
    --gs-text-h2-lh:   1.75rem;
    --gs-text-body-size: 1.125rem; /* 18 */
    --gs-text-body-lh:   1.625rem;
    --gs-text-cta-size:  1.25rem;
    --gs-space-8: 4rem;
    --gs-space-7: 3rem;
  }
}

@media (max-width: 480px) {
  :root {
    --gs-text-h1-size: 1.75rem;  /* 28 */
    --gs-text-h1-lh:   2.125rem;
    --gs-text-h2-size: 1.25rem;
    --gs-text-h2-lh:   1.625rem;
  }
}