/*!
 * flipclock.css v2.0.0 - © 2026 Jan Overwaul · https://playground.jan-overwaul.de/flipart/
 * Lizenziert unter der MIT-Lizenz: https://opensource.org/licenses/MIT
*/

/* v2.0 - SHADOW-DOM-KAPSELUNG:
 * Diese Datei enthält jetzt AUSSCHLIESSLICH Theme-Tokens (CSS Custom
 * Properties). Das gesamte Painting steckt gekapselt im Shadow Root jeder
 * Instanz (Konstante SHADOW_CSS in flipclock.js) und kann von Seiten-CSS
 * nicht mehr überschrieben werden. Die Tokens hier vererben über die
 * Shadow-Grenze und bleiben am .flipart-Host themebar (Theming-Surface).
 *
 * Konsequenz: rohe Tag-/Nachfahren-Selektoren der Seite (z.B. ".panel div",
 * ".widget *") wirken nicht mehr auf das Widget. Styling/Theming erfolgt
 * ausschließlich über die --fa-*-Tokens und data-flip-theme - beides am Host.
 */

/* ============================================================
   FlipArt - Theme-Tokens (Light DOM, vererben in den Shadow)
   ============================================================ */
.flipart {
	/* Theme-Tokens (Default: Stahl-Dunkel / Bernstein) */
	--fa-bg-top: linear-gradient(180deg, #2c3645 0%, #1f2731 100%);
	--fa-bg-bottom: linear-gradient(180deg, #1a2129 0%, #131820 100%);
	--fa-color: #e8b964;
	--fa-divider: rgba(0, 0, 0, 0.75);
	--fa-shadow: 0 0.18em 0.45em rgba(0, 0, 0, .55), inset 0 0.02em 0 rgba(255, 255, 255, .06);
	--fa-radius: 0.1em;
	--fa-tile-w: 0.86em;
	--fa-tile-h: 1.25em;
	--fa-tile-gap: 0.07em;
	--fa-group-gap: 0.55em;

	/* Pixel-stabile Laufzeitwerte; werden per JS aus den em/vw-Tokens
	   auf das Device-Pixel-Raster gesetzt (inline am Host) und vererben
	   von dort in den Shadow. Default = der zugehörige em-Token.
	   --fa-px-tile-h wird bewusst auf eine gerade Device-Pixelzahl gesetzt,
	   damit 50% exakt teilbar bleibt. */
	--fa-px-tile-w: var(--fa-tile-w);
	--fa-px-tile-h: var(--fa-tile-h);
	--fa-px-tile-gap: var(--fa-tile-gap);
	--fa-px-group-gap: var(--fa-group-gap);

	--fa-label-color: #5a6678;
	--fa-sep-color: #3f4a5a;
}

/* ============================================================
   Themes - reine Token-Overrides am Host
   ============================================================ */
.flipart[data-flip-theme="mono"] {
	--fa-bg-top: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%);
	--fa-bg-bottom: linear-gradient(180deg, #161616 0%, #0c0c0c 100%);
	--fa-color: #ececec;
	--fa-divider: rgba(0, 0, 0, .8);
	--fa-sep-color: #3a3a3a;
	--fa-label-color: #6a6a6a;
}

.flipart[data-flip-theme="paper"] {
	--fa-bg-top: linear-gradient(180deg, #f5f1e6 0%, #e9e2cf 100%);
	--fa-bg-bottom: linear-gradient(180deg, #ddd5bd 0%, #cfc6a8 100%);
	--fa-color: #1c1c1c;
	--fa-divider: rgba(0, 0, 0, .22);
	--fa-shadow: 0 0.12em 0.35em rgba(0, 0, 0, .22), inset 0 0.02em 0 rgba(255, 255, 255, .55);
	--fa-label-color: #6b6253;
	--fa-sep-color: #a89c80;
}

.flipart[data-flip-theme="neon"] {
	--fa-bg-top: linear-gradient(180deg, #1a0d2e 0%, #0e0420 100%);
	--fa-bg-bottom: linear-gradient(180deg, #0a0218 0%, #050010 100%);
	--fa-color: #00f0ff;
	--fa-divider: rgba(0, 240, 255, .22);
	--fa-shadow: 0 0 0.5em rgba(0, 240, 255, .3), inset 0 0.02em 0 rgba(0, 240, 255, .12);
	--fa-label-color: #ff2b8f;
	--fa-sep-color: #ff2b8f;
}

.flipart[data-flip-theme="terminal"] {
	--fa-bg-top: linear-gradient(180deg, #0e1a14 0%, #061008 100%);
	--fa-bg-bottom: linear-gradient(180deg, #050d08 0%, #020604 100%);
	--fa-color: #6cf48a;
	--fa-divider: rgba(108, 244, 138, .2);
	--fa-shadow: 0 0 0.4em rgba(108, 244, 138, .2), inset 0 0.02em 0 rgba(108, 244, 138, .08);
	--fa-label-color: #6cf48a;
	--fa-sep-color: #3a8050;
}