/* ===================================================================
 * FRGS design system
 *
 * Portiert aus dem FRGS-Designsystem (Joomla-Ära); führend ist diese Datei.
 * Structure: (1) tokens → (2) typography → (3) layout → (4) components
 * =================================================================== */

/* tokens.css — Layer: tokens (Design-Tokens + Schrift-Ressourcen).
 * :root-Variablen und @font-face-Deklarationen, keine sichtbaren Regeln.
 * Alle UI-Werte kommen ausschließlich aus diesen Tokens (siehe AGENTS.md). */
@layer tokens {

/* =====================================================
 * 1. TOKENS
 * ===================================================== */

:root {
  --frgs-red:        #C8332E;
  --frgs-red-dark:   #A8241F;
  --frgs-red-soft:   #FBEAE9;
  --frgs-red-bright: #E9837D; /* FRGS-Rot, aufgehellt für Kontrast auf ink-900 */
  --warn-bg:  #F6EDD8; /* „eingeschränkt”/Fest-Badges */
  --warn-ink: #6E5312;
  /* Ruderampel — eigene Signalfarben. Vereinsrot ist Chrome (Header, Kurven)
   * und darf nicht dauerhaft „Gefahr" signalisieren; deshalb ist das Sperrrot
   * hier dunkler und weniger orange als --frgs-red. Bernstein liegt bewusst
   * nah an --warn-ink, das im System schon für „eingeschränkt" steht. */
  --ampel-frei:      #2E7D52;
  --ampel-limit:     #B57A0D;
  --ampel-sperre:    #C0261F;
  --ampel-unbekannt: var(--ink-300);
  --petrol:      #24363E; /* Hero-Petrol (Pin-Schaft, Cluster-Badges, Karten-UI) */
  --petrol-dark: #1F2F35;

  --ink-900: #141414;
  --ink-700: #3A3A3A;
  --ink-500: #6B6B6B;
  --ink-300: #BFBFBF;
  --ink-200: #E2E2E0;
  --ink-100: #F1F0EC;
  --ink-050: #FAFAF7;
  --white:   #FFFFFF;

  --color-bg:         var(--ink-050);
  --color-surface:    var(--white);
  --color-text:       var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-border:     var(--ink-200);
  --color-accent:     var(--frgs-red);
  --color-accent-ink: var(--frgs-red-dark);

  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.3rem + 3vw, 3rem);

  --lh-tight: 1.2;
  --lh-body:  1.6;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --container-max: 1160px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgba(20,20,20,0.04), 0 1px 3px rgba(20,20,20,0.06);
  --shadow-infocard: 0 8px 32px rgba(20, 20, 20, 0.18);
}


/* =====================================================
 * 2. TYPOGRAPHY — @font-face + scale
 * ===================================================== */

/* Fraunces — headings (weight 500 only; all our heading rules use 500) */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500.woff2?v=4b5af777") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Inter — body, UI, buttons */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2?v=1945fa9b") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2?v=8c7e9e52") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2?v=eaae2304") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.woff2?v=fc44a221") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-italic.woff2?v=909d6bcf") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

} /* Ende @layer tokens */