/* =========================================================
   sueco Design Tokens
   Source of truth: DESIGN-SYSTEM.md §2
   Alle Werte als CSS Custom Properties. In WordPress später
   via Blocksy Palette-Slugs gemappt (Kommentar je Farbe).
   ========================================================= */

:root {
  /* --- Farben (Blocksy Palette) ----------------------------- */
  --sueco-primary:        #8b5e3c;  /* palette-color-1 — Buttons, Links, Akzente */
  --sueco-primary-hover:  #704930;  /* palette-color-2 — Button Hover */
  --sueco-text-secondary: #57534e;  /* palette-color-3 — Sekundärtext (stone-600) */
  --sueco-text-primary:   #2d2926;  /* palette-color-4 — Body, Headings, Cover-Overlay */
  --sueco-bg-cream:       #fbf6ec;  /* palette-color-5 — Section bg Creme (zart, 2x abgegrenzt zu Weiss) */
  --sueco-bg-gray:        #f4f4f5;  /* palette-color-6 — Section bg Hellgrau (zinc-100) */
  --sueco-bg-gray-light:  #fbfbfb;  /* palette-color-7 — sehr hell */
  --sueco-white:          #ffffff;  /* palette-color-8 — Standard bg */

  /* Semantische Aliase (zum Verwenden — nie direkt Hex!) */
  --sueco-border:         #e7e5e4;  /* stone-200 — Trennlinien, Outline-Border soft */
  --sueco-border-strong:  #d6d3d1;  /* stone-300 — Outline-Button-Border */
  --sueco-footer-bg:      #1c1917;  /* stone-900 — Footer dunkel (Single Source fuer alle Dunkel-BGs) */
  --sueco-bg-dark:        var(--sueco-footer-bg);  /* Alias — Section-bg dunkel (CTA-dark, Hero-bg-dark, Cover-Overlay-Basis) */
  --sueco-footer-text:    #a8a29e;  /* stone-400 — Footer-Links default */

  /* --- Typografie ------------------------------------------- */
  --sueco-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --sueco-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sueco-font-button:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font-Sizes — fluid mit clamp(), Slugs laut MD §2.2 */
  --sueco-fs-small:    13px;
  --sueco-fs-medium:   20px;
  --sueco-fs-large:    clamp(22px, 2.2vw, 30px);
  --sueco-fs-x-large:  clamp(32px, 4vw, 56px);
  --sueco-fs-xx-large: clamp(40px, 5vw, 72px);

  --sueco-lh-heading: 1.15;
  --sueco-lh-body:    1.6;

  --sueco-fw-regular: 400;
  --sueco-fw-medium:  500;
  --sueco-fw-semi:    600;
  --sueco-fw-bold:    700;

  /* --- Spacing --------------------------------------------- */
  --sueco-section-py:        4rem;   /* Standard */
  --sueco-section-py-lg:     6rem;   /* ≥ lg */
  --sueco-hero-py:           6rem;
  --sueco-cta-py:            3rem;
  --sueco-container-max:     1200px;
  --sueco-hero-content-max:  800px;
  --sueco-cta-content-max:   800px;
  --sueco-gutter:            1.5rem; /* container padding-inline */
  --sueco-gutter-lg:         2rem;

  /* --- Border Radius --------------------------------------- */
  --sueco-radius-button:      12px;  /* rounded-xl */
  --sueco-radius-card:        16px;  /* rounded-2xl */
  --sueco-radius-image-link:  8px;   /* nur verlinkte Bilder */
  /* Nicht-verlinkte Bilder: KEIN radius */

  /* --- Shadows --------------------------------------------- */
  --sueco-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sueco-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* --- Motion ---------------------------------------------- */
  --sueco-transition: 200ms ease;

  /* --- Breakpoints (nur für Doku; in CSS via @media) ------- */
  --sueco-bp-sm: 640px;
  --sueco-bp-md: 768px;
  --sueco-bp-lg: 1024px;
  --sueco-bp-xl: 1280px;
}

/* =========================================================
   Base / Reset (minimal, nicht invasiv)
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sueco-font-body);
  font-size: var(--sueco-fs-medium);
  line-height: var(--sueco-lh-body);
  color: var(--sueco-text-primary);
  background: var(--sueco-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--sueco-font-heading);
  line-height: var(--sueco-lh-heading);
  color: var(--sueco-text-primary);
  font-weight: var(--sueco-fw-semi);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--sueco-fs-xx-large); }
h2 { font-size: var(--sueco-fs-x-large); }
h3 { font-size: var(--sueco-fs-large); }
h4 { font-size: 1.25rem; }

p  { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--sueco-primary);
  text-decoration: none;
  transition: color var(--sueco-transition);
}
a:hover { color: var(--sueco-primary-hover); }

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

/* =========================================================
   Utility Primitives (für statische Snapshots ohne React)
   ========================================================= */

.sueco-container {
  max-width: var(--sueco-container-max);
  margin-inline: auto;
  padding-inline: var(--sueco-gutter);
}
@media (min-width: 1024px) {
  .sueco-container { padding-inline: var(--sueco-gutter-lg); }
}

.sueco-section {
  padding-block: var(--sueco-section-py);
}
@media (min-width: 1024px) {
  .sueco-section { padding-block: var(--sueco-section-py-lg); }
}

.sueco-bg-white  { background: var(--sueco-white); }
.sueco-bg-cream  { background: var(--sueco-bg-cream); }
.sueco-bg-gray   { background: var(--sueco-bg-gray); }
.sueco-bg-dark   { background: var(--sueco-footer-bg); color: #e7e5e4; }

/* Buttons */
.sueco-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sueco-font-button);
  font-weight: var(--sueco-fw-semi);
  font-size: 1rem;
  line-height: 1;
  padding: 0.75rem 2rem;
  border-radius: var(--sueco-radius-button);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--sueco-transition);
  text-decoration: none;
}
.sueco-btn--primary {
  background: var(--sueco-primary);
  color: var(--sueco-white);
}
.sueco-btn--primary:hover {
  background: var(--sueco-primary-hover);
  color: var(--sueco-white);
}
.sueco-btn--outline {
  background: transparent;
  color: #44403c;
  border-color: var(--sueco-border-strong);
}
.sueco-btn--outline:hover {
  color: var(--sueco-primary);
  border-color: var(--sueco-primary);
}

/* Card */
.sueco-card {
  background: var(--sueco-white);
  border: 1px solid var(--sueco-border);
  border-radius: var(--sueco-radius-card);
  box-shadow: var(--sueco-shadow-sm);
  padding: 1.5rem;
  transition: all var(--sueco-transition);
}
.sueco-card:hover {
  border-color: var(--sueco-border-strong);
  box-shadow: var(--sueco-shadow-md);
  transform: translateY(-4px);
}

/* Bild-Ratio-Helper (3/2 cover, MD §6) */
.sueco-img-3-2 {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  display: block;
}
.sueco-img-linked { border-radius: var(--sueco-radius-image-link); }
/* Bewusst NICHT: .sueco-img-3-2 default radius — nicht-verlinkte Bilder ohne Radius */

/* Typografische Akzent-Span (nach MD §5.3) */
.sueco-accent { color: var(--sueco-primary); font-style: italic; }

/* Screen-reader-only */
.sueco-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}