/* ============================================================
   tokens.css - ITCSS Settings-Schicht
   Scale2Boss Affiliate System - Design-Tokens als native CSS Vars.

   Die semantischen Farb- und Schrift-Tokens konsumieren die CSS-Variablen
   des aktiven Themes (Impreza: --color-content-*, --h1-font-family,
   --font-family). So matcht das Plugin automatisch das Theme-Design
   (inkl. Srotone-Headlines) ohne doppelte Fonts/Farben. Die Marken-Werte
   (Navy #122948 / Gold #c3a363) dienen nur als Fallback, z. B. im wp-admin,
   wo die Theme-Variablen fehlen.
   ============================================================ */

:root {
	/* --- Marken-Palette --- */
	--s2b-navy: #122948;
	--s2b-gold: #c3a363;
	--s2b-ink: #1b2b3a;
	--s2b-white: #ffffff;

	/* Navy-Toene */
	--s2b-navy-900: #0c1d33;
	--s2b-navy-800: #122948;
	--s2b-navy-700: #1b3a61;
	--s2b-navy-600: #244b7a;

	/* Gold-/Champagner-Toene */
	--s2b-gold-600: #a9883f;
	--s2b-gold-500: #c3a363;
	--s2b-gold-400: #d4ba85;

	/* Neutrale Graustufen */
	--s2b-gray-50: #f6f8fa;
	--s2b-gray-100: #eaeef3;
	--s2b-gray-200: #d6dde6;
	--s2b-gray-400: #9aa7b5;
	--s2b-gray-600: #5d6b7a;

	/* --- Semantische Farben: aus den Theme-Variablen (Impreza), Marken-Werte
	   als Fallback fuer Kontexte ohne Theme (z. B. wp-admin). --- */
	--s2b-color-bg: var(--color-content-bg, var(--s2b-white));
	--s2b-color-bg-alt: var(--color-content-bg-alt, #e8ecf4);
	--s2b-color-surface: var(--s2b-gray-50);
	--s2b-color-text: var(--color-content-text, var(--s2b-ink));
	--s2b-color-heading: var(--color-content-heading, var(--s2b-navy));
	--s2b-color-primary: var(--color-content-primary, var(--s2b-navy));
	--s2b-color-accent: var(--color-content-secondary, var(--s2b-gold));
	--s2b-color-link: var(--color-content-link, var(--s2b-gold));
	--s2b-color-link-hover: var(--color-content-link-hover, var(--s2b-navy));
	--s2b-color-border: var(--color-content-border, var(--s2b-gray-200));
	--s2b-color-muted: var(--s2b-gray-600);
	--s2b-color-text-invert: var(--s2b-white);
	--s2b-color-primary-faded: var(--color-content-primary-faded, rgba(18, 41, 72, 0.15));
	--s2b-color-footer-bg: var(--color-footer-bg, var(--s2b-navy));
	--s2b-color-footer-text: var(--s2b-white);

	/* Status (Provisions-Lebenszyklus) */
	--s2b-color-success: #2f7a4d;
	--s2b-color-warning: #b07b1e;
	--s2b-color-danger: #b3402f;
	--s2b-status-open: var(--s2b-gray-600);
	--s2b-status-locked: var(--s2b-color-warning);
	--s2b-status-released: var(--s2b-color-success);
	--s2b-status-paid: var(--s2b-navy);

	/* --- Typografie: direkt aus den Theme-Variablen. Impreza setzt --font-family
	   (Body, IBM Plex) und --h1-font-family (Headlines, Srotone). So nutzt das
	   Plugin exakt die Theme-Schriften - kein zweiter Font-Download. Generische
	   Familien als Fallback (z. B. wp-admin). --- */
	--s2b-font-body: var(--font-family, "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif);
	--s2b-font-heading: var(--h1-font-family, "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif);
	--s2b-fw-regular: 400;
	--s2b-fw-medium: 500;
	--s2b-fw-bold: 700;
	--s2b-fs-body: 1rem;
	--s2b-lh-base: 1.55;
	--s2b-lh-tight: 1.2;

	/* Heading-Groessen */
	--s2b-fs-h1: 2.25rem;
	--s2b-fs-h2: 1.75rem;
	--s2b-fs-h3: 1.5rem;
	--s2b-fs-h4: 1.25rem;
	--s2b-fs-h5: 1.1rem;
	--s2b-fs-h6: 1rem;

	/* Kleinere UI-Groessen */
	--s2b-fs-100: 0.8rem;
	--s2b-fs-200: 0.9rem;
	--s2b-fs-300: 1rem;

	/* --- Formularfelder --- */
	--s2b-input-font-size: 1rem;
	--s2b-input-height: 2.8rem;
	--s2b-input-padding: 0.8rem;
	--s2b-input-border-width: 1px;
	--s2b-input-border-radius: 6px;
	--s2b-input-checkbox-size: 1.4em;

	/* --- Spacing-Scale (4px-Basis) --- */
	--s2b-space-1: 0.25rem;
	--s2b-space-2: 0.5rem;
	--s2b-space-3: 0.75rem;
	--s2b-space-4: 1rem;
	--s2b-space-5: 1.5rem;
	--s2b-space-6: 2rem;
	--s2b-space-7: 3rem;
	--s2b-space-8: 4rem;
	--s2b-section-padding: 3rem;

	/* --- Radius / Schatten / Layout --- */
	--s2b-radius-sm: 4px;
	--s2b-radius-md: 8px;
	--s2b-radius-lg: 16px;
	--s2b-radius-pill: 999px;
	--s2b-shadow-sm: 0 1px 2px rgba(18, 41, 72, 0.08);
	--s2b-shadow-md: var(--box-shadow, 0 6px 20px rgba(18, 41, 72, 0.12));
	--s2b-container-max: 1100px;
	--s2b-canvas-max: 1280px;

	/* --- Motion / Fokus --- */
	--s2b-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--s2b-duration: 180ms;
	--s2b-focus-width: 2px;
	--s2b-focus-ring: 0 0 0 var(--s2b-focus-width) rgba(195, 163, 99, 0.55);
}