/* Tidya design tokens — mørk modus er standard, lys følger OS eller data-theme="light" */

/* Selvhostede fonter (SIL OFL 1.1, se fonts/LICENSE-*.txt). Latin-subset dekker æ, ø og å. */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/fraunces-latin-opsz-wght-normal.woff2') format('woff2');
}

:root {
	color-scheme: dark;
	/* Mørk modus */
	--color-bg:                   #1a1816;
	--color-surface:              #272422;
	--color-text:                 #f5efe6;
	--color-text-secondary:       #d4a88f;
	--color-text-muted:           rgba(245, 239, 230, 0.55);
	--color-accent:               #ffbe0b;
	--color-accent-hover:         #ffc933;
	--color-accent-fill:          #ffbe0b;
	--color-accent-fill-hover:    #ffc933;
	--color-on-accent:            #1c1712;
	--color-label:                #e0956d;
	--color-link:                 var(--color-accent);
	--color-error:                #ff5c5c;
	--color-success:              #4cc38a;
	--color-warning:              #ff9f43;
	--color-info:                 #6cb6ff;
	--color-error-bg:             rgba(255, 82, 82, 0.12);
	--color-success-bg:           rgba(76, 195, 138, 0.12);
	--color-warning-bg:           rgba(255, 159, 67, 0.12);
	--color-info-bg:              rgba(108, 182, 255, 0.12);
	--color-border:               rgba(255, 255, 255, 0.06);
	--color-border-subtle:        rgba(255, 255, 255, 0.10);
	--color-border-control:       rgba(255, 255, 255, 0.34);
	--color-accent-border:        rgba(255, 190, 11, 0.46);
	--color-accent-bg-subtle:     rgba(255, 190, 11, 0.05);
	--color-focus-halo:            rgba(255, 190, 11, 0.18);
	--shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.45);
	--shadow-lg:                  0 12px 32px rgba(0, 0, 0, 0.55);
	--color-overlay:              rgba(0, 0, 0, 0.60);

	--font-body:    'Manrope', system-ui, sans-serif;
	--font-display: 'Fraunces', Georgia, serif;

	--text-xs:   0.8125rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.35rem;
	--text-2xl:  1.5rem;
	--text-3xl:  clamp(2rem, 5vw, 3rem);
	--text-display: clamp(2.5rem, 7vw, 4.5rem);

	--leading-tight:  1.2;
	--leading-normal: 1.6;

	--font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	--r-sm: 4px;
	--r-md: 6px;
	--r-lg: 8px;
	--r-xl: 10px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;

	--t-fast: 0.15s ease;
	--t-lift: 0.1s ease;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--color-bg:                   #f7f3ee;
		--color-surface:              #ede8e1;
		--color-text:                 #1c1712;
		--color-text-secondary:       #7a4a2e;
		--color-text-muted:           rgba(28, 23, 18, 0.65);
		--color-accent:               #8a5d00;
		--color-accent-hover:         #6b4900;
		--color-accent-fill:          #ffbe0b;
		--color-accent-fill-hover:    #f0a800;
		--color-on-accent:            #1c1712;
		--color-label:                #9c3d1a;
		--color-error:                #c41c1c;
		--color-success:              #17703f;
		--color-warning:              #9a4d00;
		--color-info:                 #1a5a9e;
		--color-error-bg:             rgba(200, 32, 32, 0.08);
		--color-success-bg:           rgba(23, 112, 63, 0.10);
		--color-warning-bg:           rgba(154, 77, 0, 0.10);
		--color-info-bg:              rgba(26, 90, 158, 0.10);
		--color-border:               rgba(28, 23, 18, 0.10);
		--color-border-subtle:        rgba(28, 23, 18, 0.16);
		--color-border-control:       rgba(28, 23, 18, 0.49);
		--color-accent-border:        rgba(138, 93, 0, 0.76);
		--color-accent-bg-subtle:     rgba(255, 190, 11, 0.12);
		--color-focus-halo:            rgba(255, 190, 11, 0.45);
		--shadow-md:                  0 4px 12px rgba(28, 23, 18, 0.16);
		--shadow-lg:                  0 12px 32px rgba(28, 23, 18, 0.16);
		--color-overlay:              rgba(28, 23, 18, 0.45);
	}
}

:root[data-theme="light"] {
	color-scheme: light;
	--color-bg:                   #f7f3ee;
	--color-surface:              #ede8e1;
	--color-text:                 #1c1712;
	--color-text-secondary:       #7a4a2e;
	--color-text-muted:           rgba(28, 23, 18, 0.65);
	--color-accent:               #8a5d00;
	--color-accent-hover:         #6b4900;
	--color-accent-fill:          #ffbe0b;
	--color-accent-fill-hover:    #f0a800;
	--color-on-accent:            #1c1712;
	--color-label:                #9c3d1a;
	--color-error:                #c41c1c;
	--color-success:              #17703f;
	--color-warning:              #9a4d00;
	--color-info:                 #1a5a9e;
	--color-error-bg:             rgba(200, 32, 32, 0.08);
	--color-success-bg:           rgba(23, 112, 63, 0.10);
	--color-warning-bg:           rgba(154, 77, 0, 0.10);
	--color-info-bg:              rgba(26, 90, 158, 0.10);
	--color-border:               rgba(28, 23, 18, 0.10);
	--color-border-subtle:        rgba(28, 23, 18, 0.16);
	--color-border-control:       rgba(28, 23, 18, 0.49);
	--color-accent-border:        rgba(138, 93, 0, 0.76);
	--color-accent-bg-subtle:     rgba(255, 190, 11, 0.12);
	--color-focus-halo:            rgba(255, 190, 11, 0.45);
	--shadow-md:                  0 4px 12px rgba(28, 23, 18, 0.16);
	--shadow-lg:                  0 12px 32px rgba(28, 23, 18, 0.16);
	--color-overlay:              rgba(28, 23, 18, 0.45);
}