/*
 * Social Media Center – Design-Tokens
 * Quelle: KokoFamily DesignMD (verbindlich). Alle Helper nutzen diese Variablen,
 * damit das UI konsistent bleibt.
 */
:root {
  /* Farben */
  --color-primary: #AE887B;      /* Terracotta – CTAs, Akzente, Links */
  --color-secondary: #5E5946;    /* Olive – Header/Footer, dunkle Bänder, Text */
  --color-sage: #C3C1AB;         /* Sage – sekundäre Akzente, Icon-Hintergründe, Rahmen */
  --color-blush: #D9BFB1;        /* Blush – sekundäre Buttons, Tags */
  --color-cream-light: #F0DED0;  /* Cream – Section-Hintergrund (alternierend) */
  --color-cream-pale: #E7E5D9;   /* Sand – Section-Hintergrund (alternierend) */
  --color-white: #FFFFFF;        /* Basis-Hintergrund, Card-Flächen */
  --color-text-dark: #3A3631;    /* Body-Text auf hell */
  --color-text-light: #F5F0EA;   /* Body-Text auf dunkel/olive */
  --color-success: #7C8B6F;      /* Bestätigungen, Häkchen */

  /* Typografie */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;

  /* Radius */
  --radius-card-lg: 16px;
  --radius-card-sm: 12px;
  --radius-pill: 50px;

  /* Spacing & Layout */
  --space-unit: 8px;
  --container-max: 1140px;
  --container-gutter: 24px;

  /* Schatten */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Basis-Komponenten gemäß DesignMD (werden ab Phase 4 ausgebaut) */
.smc-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
}
.smc-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-card);
}
.smc-btn--secondary {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.smc-card {
  background: var(--color-white);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.smc-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-text-dark);
}