/*
 * Brainfood — main.css
 *
 * Globale Tokens + Reset + Layout-Helper.
 * Komponenten-spezifische Styles wandern in /assets/css/components/.
 */

:root {
  /* Farben (Spiegelung von theme.json — für Vanilla-CSS-Komponenten nutzbar) */
  --bf-turquoise:      #00C3D6;
  --bf-turquoise-dark: #00A5B6;
  --bf-turquoise-40:   #99E7EF;
  --bf-turquoise-20:   #CCF3F7;
  --bf-green-dark-1:   #0B696E;
  --bf-green-dark-2:   #0D7C82;
  --bf-green:          #00BF9A;
  --bf-pink:           #DD1F5A;
  --bf-orange:         #F46721;
  --bf-yellow:         #ECB903;
  --bf-gray-dark:      #263237;
  --bf-gray-80:        #515B5F;
  --bf-gray-60:        #7D8487;
  --bf-gray-40:        #A8ADAF;
  --bf-gray-20:        #D4D6D7;
  --bf-beige:          #E1E2D8;
  --bf-beige-light:    #F7F7F5;
  --bf-white:          #FFFFFF;
  --bf-black:          #0F1517;

  /* Radien */
  --radius-xs:  8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 2px 8px rgba(11,105,110,.04), 0 1px 2px rgba(11,105,110,.03);
  --shadow-md: 0 8px 28px rgba(11,105,110,.06), 0 2px 6px rgba(11,105,110,.04);
  --shadow-lg: 0 24px 60px rgba(11,105,110,.10), 0 6px 20px rgba(11,105,110,.06);

  /* Easing */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Container */
  --container-max: 1240px;
  --container-pad: 32px;
  --container-pad-mobile: 24px;
}

/* Sehr leichter Reset — Details kommen in Phase 2/4. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bf-gray-dark);
  background: var(--bf-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .5em;
}
img { max-width: 100%; height: auto; }
a { color: var(--bf-green-dark-1); }
a:hover { color: var(--bf-green); }

/* Skip-Link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bf-gray-dark);
  color: var(--bf-white);
  padding: 12px 18px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; outline: 2px solid var(--bf-turquoise); }

/* Layout: Container */
.bf-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (max-width: 768px) {
  .bf-container { padding-inline: var(--container-pad-mobile); }
}

/* Header: minimaler Logo-Bereich für Phase 1 */
.bf-header {
  background: var(--bf-white);
  border-bottom: 1px solid var(--bf-gray-20);
  padding-block: 18px;
}
.bf-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.bf-header__logo img,
.bf-header__logo svg { display: block; max-height: 40px; width: auto; }

/* Footer: minimal */
.bf-footer {
  background: var(--bf-gray-dark);
  color: var(--bf-gray-20);
  padding-block: 32px;
  margin-top: 64px;
}
.bf-footer a { color: var(--bf-turquoise-40); }