/* ============================================================
   SMBL.media · Brand Tokens v1.0 · Mai 2026
   CSS Custom Properties (Alternative zu Tailwind)
   ============================================================ */

:root {
  /* ====== COLORS ====== */
  --smbl-navy: #0F172A;        /* Primary Accent · Logo · CTAs */
  --smbl-white: #FFFFFF;       /* Background Default */
  --smbl-black: #0A0A0A;       /* Body Text · Headlines */

  /* Neutral-Skala */
  --smbl-gray-50:  #F8FAFC;
  --smbl-gray-100: #F1F5F9;
  --smbl-gray-200: #E2E8F0;
  --smbl-gray-300: #CBD5E1;
  --smbl-gray-500: #64748B;
  --smbl-gray-700: #334155;

  /* ====== TYPOGRAPHY ====== */
  --font-display: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter",   ui-sans-serif, system-ui, sans-serif;

  --text-display-2xl: 72px;
  --text-display-xl:  56px;
  --text-display-lg:  48px;
  --text-display-md:  36px;
  --text-display-sm:  28px;
  --text-body-xl: 20px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 12px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.5;

  /* ====== SPACING (8-Pixel-Basis) ====== */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;
  --space-16: 128px;

  /* ====== RADIUS ====== */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ====== MOTION ====== */
  --ease-smbl: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration:      400ms;
  --duration-slow: 600ms;

  /* ====== SHADOWS ====== */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow:    0 4px 12px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.12);

  /* ====== LAYOUT ====== */
  --container-content: 1280px;
  --container-narrow:  720px;
}

/* ============================================================
   FONTS · SELBST GEHOSTET (DSGVO, kein CDN/@import!)
   Lege die .woff2-Dateien in  assets/fonts/  ab (siehe README dort).
   Solange die Dateien fehlen, greift sauber der System-Font-Fallback.
   ============================================================ */

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* ============================================================
   BASE STYLES
   ============================================================ */

html {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--smbl-black);
  background: var(--smbl-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--smbl-black);
}

h1 { font-size: var(--text-display-xl); }
h2 { font-size: var(--text-display-lg); }
h3 { font-size: var(--text-display-md); }
h4 { font-size: var(--text-display-sm); }

/* ============================================================
   BUTTON KOMPONENTEN
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body);
  padding: 12px 24px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smbl);
  text-decoration: none;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--smbl-navy);
  color: var(--smbl-white);
}
.btn-primary:hover {
  background: var(--smbl-black);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--smbl-navy);
  border-color: var(--smbl-navy);
}
.btn-secondary:hover {
  background: var(--smbl-gray-50);
}

/* ============================================================
   CARD
   ============================================================ */

.card {
  background: var(--smbl-white);
  border: 1px solid var(--smbl-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  transition: box-shadow var(--duration) var(--ease-smbl);
}
.card:hover {
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
  max-width: var(--container-content);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-3);
}