/*
 * Gemensamma färger för hela temperatur.nu: React, PHP-sidorna, info-WP och forumet.
 * Variablerna beskriver ROLL, inte värde. Ny färg = välj en befintlig roll; ny roll bara efter beslut.
 * Ljusa värden = dagens färger. Mörka värden gäller när tnu-theme.js satt data-theme="dark" på <html>.
 * Fasta (byts inte med tema): temperaturskala, kartans färgramp, loggans färger.
 * Höj ?v= i alla länkar vid ändring (filen cachas ett år).
 */
:root {
	/* Ytor */
	--tnu-bg: #f5f5f6;            /* sidans bakgrund */
	--tnu-surface: #ffffff;       /* kort, sidhuvud, menyer */
	--tnu-surface-alt: #f0eeeb;   /* hover, sekundär yta */

	/* Text */
	--tnu-text: #171717;          /* brödtext, rubriker */
	--tnu-text-2: #4a4844;        /* sekundär text */
	--tnu-text-muted: #5f5f5f;    /* etiketter, metadata (6,4:1 mot vitt) */
	--tnu-text-inverse: #ffffff;  /* text på mörk knapp */

	/* Linjer */
	--tnu-border: #dedad7;        /* ramar, avdelare */
	--tnu-border-soft: #ececea;   /* svaga avdelare inne i menyer */

	/* Accent */
	--tnu-link: #005fcc;
	--tnu-link-hover: #004aa3;
	--tnu-link-soft: #e8f1fc;     /* ljus blå bakgrund, info */
	--tnu-focus: #005fcc;         /* fokusram */
	--tnu-yellow: #f9ca24;        /* varumärkesgult: markering under aktuell länk */

	/* Status */
	--tnu-good: #008060;
	--tnu-good-bg: #e9f7f1;
	--tnu-good-text: #0b5e47;
	--tnu-warn: #e8a817;
	--tnu-warn-bg: #fff6e5;
	--tnu-warn-text: #8a5300;
	--tnu-bad: #c0392b;
	--tnu-bad-bg: #fdecea;
	--tnu-bad-text: #721c24;

	/* Skuggor */
	--tnu-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
	--tnu-shadow-lg: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);
	--tnu-overlay: rgba(0,0,0,.45);

	/* Grafer (används från steg 3) */
	--tnu-chart-grid: #e0e0e0;
	--tnu-chart-axis: #5f5f5f;
	--tnu-chart-line: #005fcc;
}

/* Mörkt tema: förslag, inte lanserat (väljaren är dold) */
:root[data-theme="dark"] {
	color-scheme: dark;

	--tnu-bg: #121417;
	--tnu-surface: #1b1e23;
	--tnu-surface-alt: #262a30;

	--tnu-text: #e8e8e6;
	--tnu-text-2: #c4c2bd;
	--tnu-text-muted: #a3a3a3;
	--tnu-text-inverse: #171717;

	--tnu-border: #3a3e45;
	--tnu-border-soft: #2c3036;

	--tnu-link: #7ab3ff;
	--tnu-link-hover: #a3caff;
	--tnu-link-soft: #1c2a40;
	--tnu-focus: #7ab3ff;
	--tnu-yellow: #f9ca24;

	--tnu-good: #3ccf9a;
	--tnu-good-bg: #12302a;
	--tnu-good-text: #8fe3c2;
	--tnu-warn: #f0b440;
	--tnu-warn-bg: #3a2c12;
	--tnu-warn-text: #f5cf86;
	--tnu-bad: #ff7a6b;
	--tnu-bad-bg: #3a1d1b;
	--tnu-bad-text: #ffb4aa;

	--tnu-shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
	--tnu-shadow-lg: 0 10px 20px rgba(0,0,0,.5), 0 6px 6px rgba(0,0,0,.5);
	--tnu-overlay: rgba(0,0,0,.6);

	--tnu-chart-grid: #333840;
	--tnu-chart-axis: #a3a3a3;
	--tnu-chart-line: #7ab3ff;
}

/* Loggan: mörk variant (img med klassen tnu-logo eller id/klass från respektive system) */
:root[data-theme="dark"] img.tnu-logo { content: url(/tema/logo-dark.svg); }