/* ============================================================================
   Quiz Academy – Design Tokens
   Alle Tokens sind auf .qa-app gescoped, damit das Plugin das restliche
   WordPress-Theme nicht beeinflusst. Akzentfarbe pro Thema über --qa-accent.
   ========================================================================== */

.qa-app{
	/* ---- Neutrale Grundfarben (kühl getönt, premium) ---- */
	--qa-white:#ffffff;
	--qa-bg:#fafafc;            /* Off-White Hintergrund */
	--qa-bg-subtle:#f4f5f8;
	--qa-surface:#ffffff;       /* Karten */
	--qa-surface-2:#f7f8fb;
	--qa-surface-3:#eef0f5;

	--qa-ink-900:#10121a;       /* Überschriften */
	--qa-ink-700:#282c39;
	--qa-ink-600:#464c5e;       /* Fließtext */
	--qa-ink-500:#6b7280;       /* sekundär */
	--qa-ink-400:#98a0ae;       /* muted / Hinweise */

	--qa-line:#e7e9f0;          /* Standard-Hairline */
	--qa-line-strong:#d7dae5;

	/* ---- Primär: Indigo ---- */
	--qa-primary-50:#eef0ff;
	--qa-primary-100:#e0e3ff;
	--qa-primary-200:#c6caff;
	--qa-primary-300:#a3a9fb;
	--qa-primary-400:#7f86f4;
	--qa-primary-500:#5b63eb;
	--qa-primary-600:#4a4fd6;   /* Primär */
	--qa-primary-700:#3a3cb0;
	--qa-primary:var(--qa-primary-600);

	/* ---- Sekundär: Türkis ---- */
	--qa-secondary-100:#d6faf4;
	--qa-secondary-400:#2dd4bf;
	--qa-secondary:#14b8a6;
	--qa-secondary-700:#0f766e;

	/* ---- Semantisch ---- */
	--qa-success:#16a34a;  --qa-success-bg:#e9f9ef;  --qa-success-ink:#14532d;
	--qa-warning:#e08a00;  --qa-warning-bg:#fdf3e2;  --qa-warning-ink:#7a3d00;
	--qa-error:#e5484d;    --qa-error-bg:#fdecec;    --qa-error-ink:#7f1d1d;

	/* ---- Themen-Akzent (pro Thema überschreibbar via inline --qa-accent) ---- */
	--qa-accent:var(--qa-primary);
	--qa-accent-weak:color-mix(in srgb, var(--qa-accent) 10%, var(--qa-white));
	--qa-accent-soft:color-mix(in srgb, var(--qa-accent) 16%, var(--qa-white));
	--qa-accent-border:color-mix(in srgb, var(--qa-accent) 32%, var(--qa-white));
	--qa-accent-strong:color-mix(in srgb, var(--qa-accent) 82%, #10121a);
	--qa-accent-ink:color-mix(in srgb, var(--qa-accent) 62%, #10121a);
	--qa-accent-contrast:#ffffff;

	/* ---- Verläufe (dezente Akzente) ---- */
	--qa-grad-accent:linear-gradient(135deg,
		var(--qa-accent),
		color-mix(in srgb, var(--qa-accent) 68%, #7c6bf0));
	--qa-grad-hero:linear-gradient(135deg,
		color-mix(in srgb, var(--qa-accent) 8%, var(--qa-white)),
		color-mix(in srgb, var(--qa-secondary) 8%, var(--qa-white)));

	/* ---- Glassmorphism (sehr dezent) ---- */
	--qa-glass-bg:rgba(255,255,255,.72);
	--qa-glass-border:rgba(255,255,255,.6);
	--qa-glass-blur:14px;

	/* ---- Typografie ---- */
	--qa-font-sans:"Inter","Geist","Manrope",ui-sans-serif,system-ui,-apple-system,
		"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--qa-font-mono:"JetBrains Mono","SF Mono",ui-monospace,SFMono-Regular,Menlo,
		Consolas,monospace;

	--qa-text-display:clamp(1.9rem,1.4rem + 2vw,2.5rem);  /* 30–40 */
	--qa-text-h1:clamp(1.6rem,1.3rem + 1.2vw,2rem);        /* 26–32 */
	--qa-text-h2:1.5rem;   /* 24 */
	--qa-text-h3:1.25rem;  /* 20 */
	--qa-text-h4:1.125rem; /* 18 */
	--qa-text-lg:1.0625rem;/* 17 */
	--qa-text-base:1rem;   /* 16 */
	--qa-text-sm:.875rem;  /* 14 */
	--qa-text-xs:.8125rem; /* 13 */
	--qa-text-2xs:.75rem;  /* 12 */

	--qa-weight-normal:400;
	--qa-weight-medium:500;
	--qa-weight-semibold:600;
	--qa-weight-bold:700;

	--qa-leading-tight:1.25;
	--qa-leading-snug:1.4;
	--qa-leading-normal:1.65;
	--qa-tracking-tight:-0.01em;
	--qa-tracking-wide:0.02em;
	--qa-tracking-over:0.12em;

	/* ---- Spacing (8-Point-Grid) ---- */
	--qa-space-1:.25rem;  /* 4  */
	--qa-space-2:.5rem;   /* 8  */
	--qa-space-3:.75rem;  /* 12 */
	--qa-space-4:1rem;    /* 16 */
	--qa-space-5:1.25rem; /* 20 */
	--qa-space-6:1.5rem;  /* 24 */
	--qa-space-8:2rem;    /* 32 */
	--qa-space-10:2.5rem; /* 40 */
	--qa-space-12:3rem;   /* 48 */
	--qa-space-16:4rem;   /* 64 */

	/* ---- Radien (weiche Rundungen 12–24) ---- */
	--qa-radius-sm:12px;
	--qa-radius-md:16px;
	--qa-radius-lg:20px;
	--qa-radius-xl:24px;
	--qa-radius-pill:999px;

	/* ---- Schatten (weich, mehrschichtig) ---- */
	--qa-shadow-xs:0 1px 2px rgba(16,18,26,.04);
	--qa-shadow-sm:0 2px 8px rgba(16,18,26,.05);
	--qa-shadow-md:0 8px 22px -8px rgba(16,18,26,.12),0 2px 6px -2px rgba(16,18,26,.06);
	--qa-shadow-lg:0 20px 44px -14px rgba(16,18,26,.18),0 6px 14px -6px rgba(16,18,26,.09);
	--qa-shadow-accent:0 12px 26px -10px color-mix(in srgb, var(--qa-accent) 55%, transparent);
	--qa-ring:0 0 0 3px color-mix(in srgb, var(--qa-accent) 32%, transparent);

	/* ---- Motion ---- */
	--qa-dur-fast:150ms;
	--qa-dur-base:200ms;
	--qa-dur-slow:250ms;
	--qa-dur-slower:400ms;
	--qa-ease:cubic-bezier(.22,.61,.36,1);        /* ease-out */
	--qa-ease-inout:cubic-bezier(.65,.05,.36,1);
	--qa-ease-spring:cubic-bezier(.34,1.4,.64,1);

	/* ---- Z-Index ---- */
	--qa-z-sticky:20;
	--qa-z-fab:30;
	--qa-z-toast:60;
	--qa-z-modal:70;

	/* ---- Layout ---- */
	--qa-container-max:820px;  /* Max. Breite der Lern-Oberfläche */

	color-scheme:light;
}

/* ============================================================================
   Dark Mode – System-Präferenz und optionaler Override [data-qa-theme]
   ========================================================================== */
@media (prefers-color-scheme: dark){
	.qa-app:not([data-qa-theme="light"]){
		--qa-bg:#0b0d12;
		--qa-bg-subtle:#0f131b;
		--qa-surface:#151922;
		--qa-surface-2:#1b202b;
		--qa-surface-3:#232a37;

		--qa-ink-900:#f3f5fa;
		--qa-ink-700:#dfe3ec;
		--qa-ink-600:#c2c7d3;
		--qa-ink-500:#98a0ae;
		--qa-ink-400:#727a89;

		--qa-line:#262c38;
		--qa-line-strong:#333a49;

		--qa-primary:var(--qa-primary-400);

		--qa-success-bg:#0f2a1b; --qa-success-ink:#8ce0a8;
		--qa-warning-bg:#2c1f0a; --qa-warning-ink:#f2c37a;
		--qa-error-bg:#2c1416;   --qa-error-ink:#f4a1a3;

		--qa-accent-weak:color-mix(in srgb, var(--qa-accent) 22%, #151922);
		--qa-accent-soft:color-mix(in srgb, var(--qa-accent) 30%, #151922);
		--qa-accent-border:color-mix(in srgb, var(--qa-accent) 45%, #151922);
		--qa-accent-strong:color-mix(in srgb, var(--qa-accent) 78%, #ffffff);
		--qa-accent-ink:color-mix(in srgb, var(--qa-accent) 70%, #ffffff);

		--qa-grad-hero:linear-gradient(135deg,
			color-mix(in srgb, var(--qa-accent) 16%, #151922),
			color-mix(in srgb, var(--qa-secondary) 14%, #151922));

		--qa-glass-bg:rgba(21,25,34,.6);
		--qa-glass-border:rgba(255,255,255,.08);

		--qa-shadow-xs:0 1px 2px rgba(0,0,0,.4);
		--qa-shadow-sm:0 2px 10px rgba(0,0,0,.4);
		--qa-shadow-md:0 10px 26px -10px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.4);
		--qa-shadow-lg:0 24px 50px -16px rgba(0,0,0,.7),0 6px 16px -6px rgba(0,0,0,.5);

		color-scheme:dark;
	}
}

.qa-app[data-qa-theme="dark"]{
	--qa-bg:#0b0d12;
	--qa-bg-subtle:#0f131b;
	--qa-surface:#151922;
	--qa-surface-2:#1b202b;
	--qa-surface-3:#232a37;
	--qa-ink-900:#f3f5fa;
	--qa-ink-700:#dfe3ec;
	--qa-ink-600:#c2c7d3;
	--qa-ink-500:#98a0ae;
	--qa-ink-400:#727a89;
	--qa-line:#262c38;
	--qa-line-strong:#333a49;
	--qa-primary:var(--qa-primary-400);
	--qa-success-bg:#0f2a1b; --qa-success-ink:#8ce0a8;
	--qa-warning-bg:#2c1f0a; --qa-warning-ink:#f2c37a;
	--qa-error-bg:#2c1416;   --qa-error-ink:#f4a1a3;
	--qa-accent-weak:color-mix(in srgb, var(--qa-accent) 22%, #151922);
	--qa-accent-soft:color-mix(in srgb, var(--qa-accent) 30%, #151922);
	--qa-accent-border:color-mix(in srgb, var(--qa-accent) 45%, #151922);
	--qa-accent-strong:color-mix(in srgb, var(--qa-accent) 78%, #ffffff);
	--qa-accent-ink:color-mix(in srgb, var(--qa-accent) 70%, #ffffff);
	--qa-glass-bg:rgba(21,25,34,.6);
	--qa-glass-border:rgba(255,255,255,.08);
	color-scheme:dark;
}

/* Reduced Motion respektieren */
@media (prefers-reduced-motion: reduce){
	.qa-app *,.qa-app *::before,.qa-app *::after{
		animation-duration:.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
		scroll-behavior:auto !important;
	}
}