/* tagtt.de Design-Tokens — Modern Clean/Flat — 2026-06-13
 *
 * Schicht 1 von 3: nur :root-Variablen (Light) + Auto-Dark (prefers-color-scheme).
 * design.css konsumiert diese mit User-Override-Fallback: var(--c-user-x, var(--c-x)).
 * Ausgeloggte Besucher haben KEINEN user_design-Block -> volles modernes Theme.
 * Marke bleibt erkennbar: Blau #283E64 / #3B5990, Orange-Akzent #FF6600.
 */
/* ----- Inter (selbst gehostet, GDPR-sicher, kein externer Request) ----- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/css/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/css/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/css/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/css/fonts/inter-latin-700-normal.woff2) format('woff2'); }

:root {
	/* ----- Markenfarben (konstant) ----- */
	--brand-900: #1f3052;   /* tiefes Blau (Header/Footer) */
	--brand-700: #283E64;   /* Primär dunkelblau */
	--brand-500: #3B5990;   /* mittleres Blau (Links) */
	--brand-300: #6f8cc4;
	--accent:    #FF6600;   /* Orange-Akzent / Hover / CTA */
	--accent-600:#e65a00;

	/* ----- Light-Theme Flächen & Text ----- */
	--c-bg:        #eef1f6;   /* Seitenhintergrund (kühl, hell) */
	--c-surface:   #ffffff;   /* Karten/Panels */
	--c-surface-2: #f5f7fb;   /* dezente Flächen, Zebra */
	--c-text:      #1b2735;   /* Haupttext */
	--c-text-soft: #5a6678;   /* sekundär/meta */
	--c-text-mute: #8a96a6;
	--c-border:    #e2e7f0;   /* feine 1px-Linien (Flat) */
	--c-border-2:  #d3dae6;

	/* ----- Rollen (semantisch) ----- */
	--c-primary:        var(--brand-700);
	--c-primary-2:      var(--brand-500);
	--c-on-primary:     #ffffff;
	--c-link:           var(--brand-500);
	--c-link-hover:     var(--accent);
	--c-accent:         var(--accent);
	--c-headerfooter:   var(--brand-700);  /* Header/Footer-Flächenfarbe */
	--c-on-header:      #eaf0fb;
	--c-buttons:        var(--brand-500);  /* Default-Buttonfläche */
	--c-on-buttons:     #ffffff;
	--c-tag-bg:         var(--brand-500);  /* Tag-Box-Hintergrund */
	--c-tag-link:       #ffffff;
	--c-chip-bg:        #eef2fa;
	--c-chip-text:      var(--brand-700);

	/* Statusfarben */
	--c-ok:      #1f9d57;  --c-ok-bg:   #e7f7ee;
	--c-warn:    #b26b00;  --c-warn-bg: #fff5e0;
	--c-err:     #d23b3b;  --c-err-bg:  #fdeaea;

	/* ----- Typografie ----- */
	--ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
	--ff-head: var(--ff);
	--fs-base: 15px;
	--lh-base: 1.6;
	--fs-h1: 1.6rem;
	--fs-h2: 1.3rem;
	--fs-h3: 1.1rem;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	/* per-User Schriftgrößen (von head.tpl/user_design überschrieben) */
	--fs-entry: 15px;
	--fs-comment: 14px;
	--fs-detail: 15px;

	/* ----- Geometrie (Flat: kleine Radii, feine Linien, kaum Schatten) ----- */
	--radius: 8px;
	--radius-sm: 6px;
	--radius-pill: 999px;
	--line: 1px solid var(--c-border);
	--shadow: none;                       /* Flat-Stil: keine Schlagschatten */
	--shadow-pop: 0 6px 24px rgba(15,25,40,.12);  /* nur für Overlays/Menüs */
	--ring: 0 0 0 3px rgba(59,89,144,.25);        /* Fokus-Ring */

	/* ----- Spacing-Skala ----- */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
	--sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;

	/* ----- Layout ----- */
	--maxw: 1120px;
	--sidebar-w: 320px;
	--header-h: 56px;
}

/* ===== Auto Dark Mode (Basis-Theme; eigene User-Farben gewinnen weiterhin) ===== */
@media (prefers-color-scheme: dark) {
	:root {
		--c-bg:        #0f1620;
		--c-surface:   #161f2b;
		--c-surface-2: #1b2735;
		--c-text:      #e7ecf3;
		--c-text-soft: #9fadc0;
		--c-text-mute: #76849a;
		--c-border:    #29384b;
		--c-border-2:  #34465c;

		--c-primary:      #1b2840;
		--c-primary-2:    #3B5990;
		--c-link:         #88a6dd;
		--c-link-hover:   #ff8534;
		--c-accent:       #ff8534;
		--c-headerfooter: #121b27;
		--c-on-header:    #cfe0f5;
		--c-buttons:      #3B5990;
		--c-tag-bg:       #2a3d63;
		--c-tag-link:     #e7ecf3;
		--c-chip-bg:      #1f2c3d;
		--c-chip-text:    #cfe0f5;

		--c-ok-bg:   #11321f; --c-warn-bg: #322710; --c-err-bg: #371b1b;
		--shadow-pop: 0 6px 24px rgba(0,0,0,.5);
	}
	img { /* Bilder im Dark Mode minimal entschärfen */ }
}