/* ==========================================================================
 * Design tokens — eneste kilde til sandhed for farver, type, rum og bevægelse.
 * Paletten er porteret fra nordic-ecommerce.dk (violet → cyan).
 *
 *   :root                         = strukturelle tokens + LYST sæt (virker uden JS)
 *   :root[data-theme="dark"]      = eksplicit mørk
 *   :root[data-theme="light"]     = eksplicit lys (slår "auto" på specificitet)
 *   @media dark + :not([data-theme]) = "auto" følger systemet
 *
 * Ingen anden CSS-fil må indeholde en hardkodet farve — kun var(--tg-*).
 * ========================================================================== */

:root {
	/* ---- Signaturgradienter ---- */
	--tg-grad-accent: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
	--tg-grad-cyan:   linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
	--tg-grad-violet: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
	--tg-grad-aurora: linear-gradient(120deg, #7c3aed 0%, #2563eb 38%, #06b6d4 70%, #22d3ee 100%);

	/* ---- Accenter ---- */
	--tg-accent:       #7c3aed;
	--tg-accent-2:     #06b6d4;
	--tg-accent-solid: #6d28d9;
	--tg-accent-soft:  rgba(124, 58, 237, .12);
	--tg-accent-tint:  rgba(124, 58, 237, .06);
	--tg-on-accent:    #ffffff;

	/* ---- Status ---- */
	--tg-success:      #059669;
	--tg-success-soft: rgba(5, 150, 105, .12);
	--tg-danger:       #dc2626;
	--tg-warning:      #d97706;

	/* ---- LYST farvesæt (default) ---- */
	--tg-bg-base:        #f5f5f7;
	--tg-bg-deep:        #e8e8ed;
	--tg-text-strong:    #0b0d14;
	--tg-text:           #3f485a;
	--tg-text-muted:     #64748b;
	--tg-surface:        rgba(255, 255, 255, .74);
	--tg-surface-elev:   rgba(255, 255, 255, .88);
	--tg-panel:          rgba(255, 255, 255, .90);
	--tg-surface-strong: #ffffff;
	--tg-surface-sunk:   rgba(15, 18, 30, .035);
	--tg-surface-input:  #ffffff;
	--tg-border:         rgba(15, 18, 30, .10);
	--tg-border-strong:  rgba(15, 18, 30, .16);
	--tg-shadow:         0 24px 48px -16px rgba(11, 13, 20, .18), 0 4px 10px rgba(11, 13, 20, .04);
	--tg-shadow-sm:      0 8px 20px rgba(11, 13, 20, .06), 0 1px 2px rgba(11, 13, 20, .04);
	--tg-shadow-lg:      0 40px 80px -32px rgba(11, 13, 20, .25);
	--tg-glow:           0 18px 48px -12px rgba(124, 58, 237, .35);
	--tg-grid-line:      rgba(15, 18, 30, .05);
	--tg-skeleton:       rgba(15, 18, 30, .06);

	/* ---- Typografi ---- */
	--tg-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--tg-font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;

	/* ---- Typeskala (mobil-first; skaleres op i base.css) ---- */
	--tg-fs-300: .8125rem;
	--tg-fs-400: 1rem;
	--tg-fs-500: 1.125rem;
	--tg-fs-600: 1.375rem;
	--tg-fs-700: 1.75rem;
	--tg-fs-800: 2.25rem;
	--tg-fs-900: 2.75rem;
	--tg-fs-1000: 3.25rem;
	--tg-leading-tight: 1.08;
	--tg-leading-snug: 1.28;
	--tg-leading: 1.65;

	/* ---- Rum ---- */
	--tg-space-1: .25rem;  --tg-space-2: .5rem;   --tg-space-3: .75rem;
	--tg-space-4: 1rem;    --tg-space-5: 1.25rem; --tg-space-6: 1.5rem;
	--tg-space-8: 2rem;    --tg-space-10: 2.5rem; --tg-space-12: 3rem;
	--tg-space-16: 4rem;   --tg-space-20: 5rem;   --tg-space-24: 6rem;
	--tg-section-y: clamp(3.5rem, 8vw, 7rem);

	/* ---- Radier ---- */
	--tg-radius-xs: 4px;  --tg-radius-sm: 6px;  --tg-radius-md: 10px;
	--tg-radius-lg: 14px; --tg-radius-xl: 18px; --tg-radius-2xl: 26px;
	--tg-radius-pill: 999px;

	/* ---- Layout ---- */
	--tg-container: 1200px;
	--tg-container-narrow: 760px;
	--tg-container-wide: 1360px;
	--tg-gutter: clamp(1rem, 4vw, 2.5rem);
	--tg-header-h: 72px;

	/* ---- Fokus + bevægelse ---- */
	--tg-ring: 0 0 0 3px rgba(124, 58, 237, .32);
	--tg-ease: cubic-bezier(.22, .61, .36, 1);
	--tg-ease-out: cubic-bezier(.16, 1, .3, 1);
	--tg-dur: .45s;
	--tg-dur-fast: .22s;

	/* ---- Lagdeling ---- */
	--tg-z-header: 100;
	--tg-z-sticky-cta: 150;
	--tg-z-drawer: 200;
	--tg-z-toast: 300;

	color-scheme: light;
}

/* Fælles mørkt sæt — genbruges af både eksplicit valg og "auto". */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--tg-bg-base:        #1d1d1f;
		--tg-bg-deep:        #000000;
		--tg-text-strong:    #f1f5f9;
		--tg-text:           #cbd5e1;
		--tg-text-muted:     #94a3b8;
		--tg-surface:        rgba(255, 255, 255, .045);
		--tg-surface-elev:   rgba(255, 255, 255, .07);
		--tg-panel:          rgba(38, 38, 41, .90);
		--tg-surface-strong: rgba(255, 255, 255, .10);
		--tg-surface-sunk:   rgba(0, 0, 0, .25);
		--tg-surface-input:  rgba(255, 255, 255, .05);
		--tg-border:         rgba(255, 255, 255, .10);
		--tg-border-strong:  rgba(255, 255, 255, .18);
		--tg-accent:         #a78bfa;
		--tg-accent-2:       #22d3ee;
		--tg-accent-solid:   #a78bfa;
		--tg-accent-soft:    rgba(167, 139, 250, .16);
		--tg-accent-tint:    rgba(167, 139, 250, .08);
		--tg-on-accent:      #0b0d14;
		--tg-success:        #34d399;
		--tg-success-soft:   rgba(52, 211, 153, .16);
		--tg-danger:         #f87171;
		--tg-warning:        #fbbf24;
		--tg-grad-accent:    linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
		--tg-grad-violet:    linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
		--tg-grad-aurora:    linear-gradient(120deg, #a78bfa 0%, #6366f1 38%, #22d3ee 78%, #67e8f9 100%);
		--tg-shadow:         0 30px 60px -20px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .35);
		--tg-shadow-sm:      0 8px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5);
		--tg-shadow-lg:      0 50px 100px -32px rgba(0, 0, 0, .7);
		--tg-glow:           0 20px 56px -12px rgba(167, 139, 250, .45);
		--tg-ring:           0 0 0 3px rgba(167, 139, 250, .55);
		--tg-grid-line:      rgba(255, 255, 255, .045);
		--tg-skeleton:       rgba(255, 255, 255, .07);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--tg-bg-base:        #1d1d1f;
	--tg-bg-deep:        #000000;
	--tg-text-strong:    #f1f5f9;
	--tg-text:           #cbd5e1;
	--tg-text-muted:     #94a3b8;
	--tg-surface:        rgba(255, 255, 255, .045);
	--tg-surface-elev:   rgba(255, 255, 255, .07);
	--tg-panel:          rgba(38, 38, 41, .90);
	--tg-surface-strong: rgba(255, 255, 255, .10);
	--tg-surface-sunk:   rgba(0, 0, 0, .25);
	--tg-surface-input:  rgba(255, 255, 255, .05);
	--tg-border:         rgba(255, 255, 255, .10);
	--tg-border-strong:  rgba(255, 255, 255, .18);
	--tg-accent:         #a78bfa;
	--tg-accent-2:       #22d3ee;
	--tg-accent-solid:   #a78bfa;
	--tg-accent-soft:    rgba(167, 139, 250, .16);
	--tg-accent-tint:    rgba(167, 139, 250, .08);
	--tg-on-accent:      #0b0d14;
	--tg-success:        #34d399;
	--tg-success-soft:   rgba(52, 211, 153, .16);
	--tg-danger:         #f87171;
	--tg-warning:        #fbbf24;
	--tg-grad-accent:    linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
	--tg-grad-violet:    linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
	--tg-grad-aurora:    linear-gradient(120deg, #a78bfa 0%, #6366f1 38%, #22d3ee 78%, #67e8f9 100%);
	--tg-shadow:         0 30px 60px -20px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .35);
	--tg-shadow-sm:      0 8px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5);
	--tg-shadow-lg:      0 50px 100px -32px rgba(0, 0, 0, .7);
	--tg-glow:           0 20px 56px -12px rgba(167, 139, 250, .45);
	--tg-ring:           0 0 0 3px rgba(167, 139, 250, .55);
	--tg-grid-line:      rgba(255, 255, 255, .045);
	--tg-skeleton:       rgba(255, 255, 255, .07);

	color-scheme: dark;
}

/* Eksplicit lys — findes for at vinde over "auto"-media-query'en. */
:root[data-theme="light"] {
	color-scheme: light;
}