/* =============================================================================
   00-tokens.css — die zentrale Stellschraube
   =============================================================================

   Diese Datei ist die EINZIGE, die man anfassen muss, um das Erscheinungsbild
   auf einer anderen Website zu ändern. Alle weiteren Layer (Basis, Enfold,
   WooCommerce, Gravity Forms, Utilities) greifen ausschließlich auf die hier
   definierten Variablen zu — es stehen dort keine festen Farbwerte.

   Für eine zweite Seite im Netzwerk:
     assets/css/brands/site-<blog_id>.css anlegen und dort nur die Variablen
     überschreiben, die abweichen. Wird automatisch nach dieser Datei geladen.

   Für eine komplett andere Website (anderes Theme):
     00-tokens.css + 90-utilities.css (+ ggf. 30/40) mitnehmen,
     20-enfold.css weglassen. Die Utilities sind theme-unabhängig.

   Farbwerte: Teal-Blau aus dem (e)Invoice Viewer, Graustufen und Typografie
   aus dem Validierungsbericht-Erklärer. Das Orange wurde von #F28C1B auf
   #FF883E umgestellt — wärmer, heller, entspricht dem Orange der irischen
   Trikolore.
   ========================================================================== */

:root {

	/* --- Marke ---------------------------------------------------------- */
	--sp-brand: #5F8FA8;            /* Teal-Blau, Primärfarbe                */
	--sp-brand-dark: #456B80;       /* dunklere Variante, z. B. Viewer-Kopf  */
	--sp-brand-soft: #EAF1F4;       /* Flächen, BT-Badges                    */
	--sp-accent: #FF883E;           /* Orange, Aktionen/Hervorhebung         */
	                                /* entspricht dem Orange der irischen    */
	                                /* Trikolore (Pantone 151 C)             */
	--sp-accent-soft: #FFEEE4;

	/* --- Flächen -------------------------------------------------------- */
	--sp-paper: #ECEEF2;            /* Seitenhintergrund                     */
	--sp-panel: #FFFFFF;            /* Karten, Boxen                         */
	--sp-panel-alt: #F7F8FA;        /* abgesetzte Abschnitte                 */

	/* --- Text ----------------------------------------------------------- */
	--sp-ink: #0B1220;              /* Fließtext, Überschriften              */
	--sp-ink-2: #4A5468;            /* Sekundärtext                          */
	--sp-ink-3: #7A8399;            /* Labels, Meta, Platzhalter             */
	--sp-ink-invert: #FFFFFF;

	/* --- Linien --------------------------------------------------------- */
	--sp-rule: #D5D8DE;
	--sp-rule-strong: #B8BDC7;
	--sp-rule-invert: rgba(255, 255, 255, 0.18);

	/* --- Status --------------------------------------------------------- */
	--sp-ok: #067647;
	--sp-ok-bg: #ECFDF3;
	--sp-warn: #B54708;
	--sp-warn-bg: #FFFAEB;
	--sp-error: #B42318;            /* identisch zum Validation Explainer    */
	--sp-error-bg: #FEF3F2;
	--sp-info: var(--sp-brand);
	--sp-info-bg: var(--sp-brand-soft);

	/* --- Typografie ----------------------------------------------------- */
	--sp-font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sp-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

	--sp-fs-xs: 11px;
	--sp-fs-sm: 13px;
	--sp-fs-base: 15px;
	--sp-fs-md: 16px;
	--sp-fs-lg: 20px;
	--sp-fs-xl: 24px;
	--sp-fs-2xl: 32px;
	--sp-fs-3xl: 42px;

	--sp-lh-tight: 1.15;
	--sp-lh-snug: 1.35;
	--sp-lh-base: 1.6;
	--sp-lh-loose: 1.75;

	--sp-fw-normal: 400;
	--sp-fw-medium: 500;
	--sp-fw-semibold: 600;
	--sp-fw-bold: 700;

	--sp-tracking-tight: -0.02em;
	--sp-tracking-wide: 0.05em;
	--sp-tracking-eyebrow: 0.12em;

	/* --- Abstände ------------------------------------------------------- */
	--sp-space-1: 4px;
	--sp-space-2: 8px;
	--sp-space-3: 12px;
	--sp-space-4: 16px;
	--sp-space-5: 24px;
	--sp-space-6: 32px;
	--sp-space-7: 48px;
	--sp-space-8: 64px;
	--sp-space-9: 80px;

	/* --- Rahmen & Form -------------------------------------------------- */
	/* Bewusste Designentscheidung: durchgängig scharfe Ecken.
	   Wer auf einer anderen Seite Rundungen will, ändert NUR diesen Wert. */
	--sp-radius: 0;
	--sp-border-width: 1px;
	--sp-border: var(--sp-border-width) solid var(--sp-rule);
	--sp-border-strong: var(--sp-border-width) solid var(--sp-rule-strong);

	/* --- Layout --------------------------------------------------------- */
	--sp-container: 1440px;
	--sp-measure: 65ch;             /* max. Textbreite für Lesbarkeit        */

	/* --- Fokus (Barrierefreiheit) --------------------------------------- */
	--sp-focus-color: var(--sp-accent);
	--sp-focus-width: 2px;
	--sp-focus-offset: 2px;

	/* --- Übergänge ------------------------------------------------------ */
	--sp-transition: 140ms ease;
}

/* Bei "Bewegung reduzieren" keine Übergänge erzwingen. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sp-transition: 0ms;
	}
}