/* =============================================================================
   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;
	--sp-accent-text: #B54708;      /* Orange als Schrift: 4,81:1 auf        */
	                                /* --sp-accent-soft, 5,43:1 auf Weiss   */
	                                /* ( WCAG AA ). Das helle Orange selbst  */
	                                /* erreicht als Schrift nur 2,3:1.       */

	/* --- 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: #656D80;            /* 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: none;             /* keine eigene Textbreite: volle Breite wie Enfold */

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

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

	/* --- Bausteine der Produktseiten ( 70-sp-ui.css, seit 2.6.0 ) -------- */
	/* Eigene Tokens statt Änderungen an den bestehenden: so verschiebt sich
	   auf den übrigen Seiten nichts. ⚠️ --spu-orange ist das Logo-Orange und
	   bewusst nicht --sp-accent ( #FF883E ); ob das globale Orange umgestellt
	   wird, ist nicht entschieden. Auf Orange steht dunkle Schrift, weil
	   Weiss darauf nur 2,46:1 erreicht, dunkle
	   Schrift ( --spu-ink ) dagegen 7,62:1. */
	--spu-ink: #0B1220;             /* dunkle Flächen, Schrift               */
	--spu-steel: #5F8FA8;           /* Logo-Blau ( Flächen, Symbole )        */
	--spu-steel-dark: #456B80;      /* blaues Band, Schrift-Blau auf Weiss   */
	--spu-steel-deep: #2F4F63;      /* Stufe „Prüfen“                        */
	--spu-orange: #F28C1B;          /* Logo-Orange                           */
	--spu-orange-dark: #C2700F;     /* Unterkante des orangen Knopfes        */
	--spu-grey: #F3F4F6;            /* helle Fläche statt --sp-brand-soft    */
	--spu-error: #C0392B;           /* PDF-Symbol                            */
	--spu-hero-bg: linear-gradient(118deg, #0B1220 0%, #15283A 45%, #456B80 100%);
	--spu-on-dark: #FFFFFF;         /* Schrift auf Dunkel                    */
	--spu-on-dark-2: #D3DAE2;       /* Fließtext auf Dunkel                  */
	--spu-on-dark-3: #B9C3CF;       /* leise Schrift auf Dunkel              */
	--spu-on-band: #E3EAF0;         /* Fließtext auf dem blauen Band         */
}

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