/* 🎨 Am Gleis Brugg, Design Tokens
 * Extrahiert aus bestehender Brizy-Site (https://amgleis-brugg.ch)
 * Stand: 2026-05-10
 */

:root {
  /* ─── Brand Colors (Live-Site: Schwarz/Weiss-dominiert, Beige nur Akzent) ─── */
  --color-primary:        #C19F80;  /* Beige/Gold, NUR auf Buttons/Akzenten */
  --color-primary-dark:   #A8866A;  /* Hover-States */
  --color-primary-light:  #D9BFA5;  /* sehr sparsam */
  --color-primary-hover:  #C9A888;  /* Stil 4: heller Hover-Ton (Button hebt sich ab) */
  --color-on-primary:     #141210;  /* Schrift auf Gold: Weiss hätte nur 2.5:1, dunkel ≈ 7.6:1 (WCAG AA) */
  --color-primary-text:   #7D5F44;  /* Gold als SCHRIFT auf Hell: ≈ 5.9:1 auf Weiss (primary 2.5:1, primary-dark 3.3:1 reichen nicht) */

  --color-accent:         #E10E15;  /* Rot, sparsam: Bestseller, Errors, Brand-Echo */
  --color-accent-dark:    #B00B11;  /* Hover/pressed */
  --color-accent-soft:    #FFE5E6;  /* Alert-/Banner-BG */

  /* ─── Backgrounds ─── */
  --color-bg:             #FFFFFF;  /* WEISS, Standard-Page-BG */
  --color-bg-soft:        #F5EFDF;  /* Cremeweiss, nur für 1 Akzent-Block (Gutachten) */
  --color-bg-dark:        #111111;  /* Tiefschwarz, dark Sektionen (Services, Footer) */
  --color-bg-darker:      #000000;  /* Pure black */

  /* ─── Text ─── */
  --color-text:           #333333;  /* Body auf hellem BG */
  --color-text-strong:    #000000;  /* Pure black für Headlines */
  --color-text-muted:     #6B6B6B;  /* Subtext, ≥ 4.5:1 auf Weiss und Creme (vorher #777, 4.48:1) */
  --color-text-soft:      var(--color-text-muted);  /* Alias, behebt Off-Token-Grau #8a8275 */
  --color-text-on-dark:   #F5F5F5;  /* Body auf schwarzem BG */
  --color-text-on-dark-muted: #B0B0B0;  /* Subtext auf schwarz */

  --color-border:         #E5E5E5;  /* dezenter Hairline-Divider */
  --color-border-dark:    #2A2A2A;  /* auf schwarzem BG */

  /* ─── Typography ─── */
  --font-headline:        'Roboto Condensed', system-ui, sans-serif;
  --font-body:            'Comfortaa', system-ui, sans-serif;
  --font-mono:            'JetBrains Mono', 'SF Mono', monospace;

  /* Headline Sizes (Brizy-Originale) */
  --fs-h1:                52px;
  --fs-h2:                42px;
  --fs-h3:                32px;
  --fs-h4:                22px;
  --fs-h5:                20px;
  --fs-h6:                16px;
  --fs-body:              16px;
  --fs-subtitle:          17px;
  --fs-button:            15px;
  --fs-card-title:        18px;  /* Karten-Ueberschriften (Shop, Neuwagen, Team) einheitlich */

  /* Mobile Scaling */
  --fs-h1-mobile:         36px;
  --fs-h2-mobile:         30px;
  --fs-h3-mobile:         24px;

  /* Weights */
  --fw-light:             300;
  --fw-regular:           400;
  --fw-bold:              700;

  /* Line Heights */
  --lh-tight:             1.2;
  --lh-normal:            1.5;
  --lh-relaxed:           1.6;

  /* Letter Spacing (Brizy-typisch) */
  --ls-button:            1px;
  --ls-headline:          0.5px;

  /* Eyebrow / Section-Label (einheitlich, ersetzt uneinheitliche Varianten) */
  --eyebrow-font:         var(--font-mono);
  --eyebrow-size:         11px;
  --eyebrow-weight:       500;
  --eyebrow-ls:           1.5px;
  --eyebrow-color:        var(--color-primary-text);

  /* ─── Spacing Scale ─── */
  --space-xs:             4px;
  --space-sm:             8px;
  --space-md:             16px;
  --space-lg:             24px;
  --space-xl:             40px;
  --space-2xl:            64px;
  --space-3xl:            96px;

  /* ─── Layout ─── */
  --container-max:        1200px;
  --container-narrow:     800px;
  --header-height:        80px;

  /* ─── Borders / Radii ─── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            16px;
  --radius-pill:          999px;
  --radius-btn:           4px;   /* eckige Buttons (einheitlich, ersetzt Pill) */
  --radius-control:       4px;   /* Formularfelder + Dropdowns (einheitlich) */

  /* ─── Shadows ─── */
  --shadow-sm:            0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:            0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:            0 12px 32px rgba(0,0,0,0.12);

  /* ─── Transitions ─── */
  --transition-fast:      150ms ease-out;
  --transition-normal:    250ms ease-out;
  --transition-slow:      400ms ease-out;
}

/* ─── Base Reset Light ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-headline);
  color: var(--color-text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
  margin-block: 0 var(--space-md);
}
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  margin-block: 0 var(--space-sm);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

@media (max-width: 768px) {
  h1 { font-size: var(--fs-h1-mobile); }
  h2 { font-size: var(--fs-h2-mobile); }
  h3 { font-size: var(--fs-h3-mobile); }
}

a { color: var(--color-primary-text); transition: color var(--transition-fast); }
a:hover { color: var(--color-text-strong); }

img { max-width: 100%; height: auto; display: block; }

/* ─── Buttons (ein einheitliches, eckiges System) ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* Label immer zentriert (behebt links/mittig-Uneinheitlichkeit) */
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-button);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-btn);   /* eckig statt Pill */
  transition: all var(--transition-normal);
  cursor: pointer;
  border: 2px solid transparent;
}
.btn svg { flex: none; }              /* Icons nicht zerdruecken */

/* Stil 4: Button hebt sich beim Hover leicht an, mit gold-getoentem Schatten. */
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(193, 159, 128, 0.45); }
.btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(193, 159, 128, 0.40); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 14px rgba(193, 159, 128, 0.42);   /* Stil 4: sanfter Ruhe-Schatten */
}
.btn-primary:hover {
  background: var(--color-primary-hover);              /* heller statt dunkler → hebt sich ab */
  color: var(--color-on-primary);
  box-shadow: 0 9px 22px rgba(193, 159, 128, 0.55);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
/* Neutrale Sekundaer-Variante (vorher nur konto-lokal) */
.btn-secondary {
  background: var(--color-bg-soft);
  color: var(--color-text-strong);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
/* Dezenter Ghost (transparent mit Rand) */
.btn-ghost {
  background: transparent;
  color: var(--color-text-strong);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
/* Groessen / Breite */
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 15px 34px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }