/* =============================================================
   PINGEL AI Solutions – Marken-Tokens (Single Source of Truth)
   Farben, Schrift und Design-Tokens fuer ALLE Projekte.
   Website und kuenftige Apps binden diese Datei ein, damit das
   Erscheinungsbild konsistent bleibt.

   Kanonische Referenz: Skill /pingel-branding
   ============================================================= */

/* ---- Schriftart: Montserrat (selbst gehostet, kein CDN) ---- */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat.ttf') format('truetype');
  font-weight: 100 900;   /* Variable Font – deckt alle Gewichte ab */
  font-style: normal;
  font-display: swap;     /* Text sofort sichtbar, Schrift wird nachgeladen */
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Design-Tokens ----------------------------------------- */
:root {
  /* Farben – abgeleitet aus Markenfarbe #182145 (Marine-Blau) */
  --color-brand:         #182145;   /* Primäre Markenfarbe (Logo) */
  --color-primary:       #182145;   /* Dunkel-Navy = Markenfarbe */
  --color-primary-light: #243668;   /* Navy hell: Links/Hover auf Hell */
  --color-primary-dark:  #11193a;   /* Navy dunkel: Schatten, gedrückte Zustände */
  --color-accent:        #c4902a;   /* Akzent: Amber-Gold (harmoniert mit Navy) */
  --color-accent-dark:   #a87820;   /* Akzent hover/active */
  --color-accent-light:  #e8c97a;   /* Akzent hell (Kontrast im Dunkelmodus) */
  --color-bg:            #f5f7fb;   /* Hintergrund: leicht bläulich-grau */
  --color-surface:       #ffffff;
  --color-card-bg:       #ffffff;
  --color-text:          #1a2340;   /* Fließtext: leicht marine-getönt */
  --color-muted:         #5a6a8a;   /* Gedämpft: bläuliches Grau */
  --color-border:        #dde3f0;   /* Rahmen: bläuliches Hellgrau */

  /* Typografie */
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Abstände */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;

  /* Layout */
  --max-width: 1120px;
  --radius:    0.75rem;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
}