/*
 * FLW Labs – Design-Tokens nach CI v1.0 (docs/flwlabs-ci.md, Abschnitt 10).
 * Einzige Quelle für Markenfarben, Schrift und Grundmaße.
 */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../brand/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("../brand/fonts/manrope-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../brand/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../brand/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Eine Fläche mit data-theme="dark" (z. B. der Hero der Startseite im Hellmodus) bekommt die dunklen Werte zurück. */
:root,
[data-theme="dark"] {
	/* CI-Tokens (verbindlich) */
	--flw-bg: #06131e;
	--flw-surface: #0d2330;
	--flw-cyan: #00d9e8;
	--flw-turquoise: #00ddb8;
	--flw-green: #36f27c;
	--flw-white: #f8fafc;
	--flw-muted: #a9bcc8;
	--flw-graphite: #18252e;
	--flw-border: #24404e;
	--flw-font: "Manrope", Arial, sans-serif;
	--flw-radius-button: 12px;
	--flw-radius-card: 16px;
	--flw-transition: 250ms ease;
	--flw-gradient: linear-gradient(105deg, #00d9e8 0%, #00ddb8 50%, #36f27c 100%);

	/* Abgeleitete Hilfswerte */
	--flw-surface-hover: #12303f;
	--flw-surface-glass: rgba(13, 35, 48, .72);
	--flw-border-hover: #36596a;
	--flw-muted-dim: #7891a0;
	--flw-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	--flw-glow: 0 0 32px rgba(0, 217, 232, .2);
	--flw-tracking-tight: -.03em;
	--flw-tracking-label: .2em;

	/* Abstände (8er-Raster) */
	--flw-space-1: 4px;
	--flw-space-2: 8px;
	--flw-space-3: 12px;
	--flw-space-4: 16px;
	--flw-space-5: 24px;
	--flw-space-6: 32px;
	--flw-space-7: 48px;

	/* Produktfarben (CI Abschnitt 7): so, wie die Tools sie zeigen.
	   Akzent = Einzelfarbe für Text, Linien, aktive Zustände; Verlauf = Icons und Primär-Buttons. */
	--flw-accent-movieflw: #f5b83d;
	--flw-accent-videoflw: #8444ec;
	--flw-accent-imageflw: #38d983;
	--flw-accent-postflw: #ff7a18;
	--flw-accent-webflw: #ff4d5f;
	--flw-tool-movieflw: linear-gradient(140deg, #ffd66b 0%, #f5a623 100%);
	--flw-tool-videoflw: linear-gradient(140deg, #137ef5 0%, #8444ec 100%);
	--flw-tool-imageflw: linear-gradient(140deg, #7aefac 0%, #32d68a 48%, #29c6b3 100%);
	--flw-tool-postflw: linear-gradient(140deg, #ff9a2f 0%, #ff6412 100%);
	--flw-tool-webflw: linear-gradient(140deg, #ff7785 0%, #ff4d5f 48%, #dc2944 100%);

	/* Skalen (docs/design-system-plan.md, 3.2): nur diese Werte verwenden */
	--flw-text-xs: 12px;
	--flw-text-sm: 13px;
	--flw-text-md: 14px;
	--flw-text-base: 16px;
	--flw-text-lg: 20px;
	--flw-text-xl: 24px;
	--flw-text-2xl: 32px;
	--flw-text-3xl: 40px;
	--flw-text-display: clamp(2.5rem, 5vw, 4rem);
	--flw-weight-regular: 400;
	--flw-weight-medium: 500;
	--flw-weight-semibold: 600;
	--flw-weight-bold: 700;
	--flw-leading-tight: 1.2;
	--flw-leading-normal: 1.5;
	--flw-tracking-caps: .08em;
	--flw-radius-xs: 6px;
	--flw-radius-sm: 8px;
	--flw-radius-pill: 999px;
	--flw-control-sm: 32px;
	--flw-control-md: 40px;
	--flw-control-lg: 48px;
}

/*
 * Rollen je Theme (Plan 3.1, Ebene 2). Komponenten nutzen nur diese Rollen und die Tool-Ebene,
 * nie die Markenfarben direkt. Das Theme steht als data-theme auf <html> (layout/partial_flw_theme.php);
 * ohne Attribut gilt dunkel. Eine Fläche mit eigenem data-theme stellt ihren Inhalt um.
 */
:root,
[data-theme="dark"] {
	--flw-c-bg: var(--flw-bg);
	--flw-c-surface: var(--flw-surface);
	--flw-c-surface-2: #12303f;
	--flw-c-surface-3: #193b4c;
	--flw-c-raised: #1d4254;
	--flw-c-input: #0a1c27;
	--flw-c-overlay: rgba(13, 35, 48, .97);
	--flw-c-text: var(--flw-white);
	--flw-c-text-muted: var(--flw-muted);
	--flw-c-text-subtle: #7891a0;
	--flw-c-line: rgba(169, 188, 200, .1);
	--flw-c-line-strong: var(--flw-border);
	--flw-c-success: #36f27c;
	--flw-c-warning: #ffb547;
	--flw-c-danger: #ff6b76;
	--flw-c-shadow: 0 18px 40px rgba(0, 0, 0, .32);
	/* Lesbare Textfarbe je Produktfarbe auf diesem Grund */
	--flw-c-ink-salesflw: #00d9e8;
	--flw-c-ink-movieflw: #f5b83d;
	--flw-c-ink-videoflw: #a878ff;
	--flw-c-ink-imageflw: #38d983;
	--flw-c-ink-postflw: #ff8a33;
	--flw-c-ink-webflw: #ff6474;
}

/* Nur mit ausdrücklichem Theme: der helle webflw-Editor lädt die Tokens auch. */
[data-theme="dark"] { color-scheme: dark; }

[data-theme="light"] {
	color-scheme: light;
	/* Website, Dashboard und Login bauen direkt auf den Marken-Tokens auf: im Hellmodus tragen sie helle Werte.
	   Cyan als Text braucht auf Weiß eine dunklere Stufe; der Verlauf der Primär-Buttons bleibt. */
	--flw-bg: #f4f7f9;
	--flw-surface: #ffffff;
	--flw-cyan: #00838f;
	--flw-white: #0e1d27;
	--flw-muted: #566874;
	--flw-border: #d3dde3;
	--flw-surface-hover: #edf2f5;
	--flw-surface-glass: rgba(255, 255, 255, .82);
	--flw-border-hover: #b6c5ce;
	--flw-muted-dim: #7a8a95;
	--flw-shadow: 0 18px 40px rgba(14, 29, 39, .1);
	--flw-glow: 0 0 32px rgba(0, 131, 143, .12);
	--flw-c-bg: #f4f7f9;
	--flw-c-surface: #ffffff;
	--flw-c-surface-2: #edf2f5;
	--flw-c-surface-3: #e1e9ee;
	--flw-c-raised: #ffffff;
	--flw-c-input: #ffffff;
	--flw-c-overlay: rgba(255, 255, 255, .98);
	--flw-c-text: #0e1d27;
	--flw-c-text-muted: #566874;
	--flw-c-text-subtle: #7a8a95;
	--flw-c-line: rgba(14, 29, 39, .09);
	--flw-c-line-strong: #d3dde3;
	--flw-c-success: #12924a;
	--flw-c-warning: #a45f00;
	--flw-c-danger: #d23a4a;
	--flw-c-shadow: 0 18px 40px rgba(14, 29, 39, .12);
	--flw-c-ink-salesflw: #00808a;
	--flw-c-ink-movieflw: #8a5d06;
	--flw-c-ink-videoflw: #6a35d6;
	--flw-c-ink-imageflw: #0f7f45;
	--flw-c-ink-postflw: #b84a00;
	--flw-c-ink-webflw: #c42639;
}

/*
 * Tool-Ebene (Plan 3.1, Ebene 3): data-flw-tool auf <body> oder einer Fläche setzt die Produktfarbe.
 * Eine Fläche mit data-theme ohne Tool zeigt die Plattform (FLW-Cyan). --tool-ink ist die lesbare
 * Textfarbe und wird dort aufgelöst, wo das Attribut steht: data-flw-tool also auf dieselbe Fläche
 * wie data-theme oder darunter. Bewusst nicht auf :root, denn ältere Regeln nutzen
 * var(--tool-accent, …) mit eigenem Rückfallwert (neox/ai_studio.css).
 */
[data-theme],
[data-flw-tool="salesflw"] {
	--tool-accent: var(--flw-cyan);
	--tool-gradient: var(--flw-gradient);
	--tool-on-accent: var(--flw-bg);
	--tool-ink: var(--flw-c-ink-salesflw);
}
[data-flw-tool="movieflw"] {
	--tool-accent: var(--flw-accent-movieflw);
	--tool-gradient: var(--flw-tool-movieflw);
	--tool-on-accent: #241602;
	--tool-ink: var(--flw-c-ink-movieflw);
}
[data-flw-tool="videoflw"] {
	--tool-accent: var(--flw-accent-videoflw);
	--tool-gradient: var(--flw-tool-videoflw);
	--tool-on-accent: #ffffff;
	--tool-ink: var(--flw-c-ink-videoflw);
}
[data-flw-tool="imageflw"] {
	--tool-accent: var(--flw-accent-imageflw);
	--tool-gradient: var(--flw-tool-imageflw);
	--tool-on-accent: #052b18;
	--tool-ink: var(--flw-c-ink-imageflw);
}
[data-flw-tool="postflw"] {
	--tool-accent: var(--flw-accent-postflw);
	--tool-gradient: var(--flw-tool-postflw);
	--tool-on-accent: #1a0b02;
	--tool-ink: var(--flw-c-ink-postflw);
}
[data-flw-tool="webflw"] {
	--tool-accent: var(--flw-accent-webflw);
	--tool-gradient: var(--flw-tool-webflw);
	--tool-on-accent: #26040a;
	--tool-ink: var(--flw-c-ink-webflw);
}

/* Logo-Fassungen für dunklen und hellen Grund (Website, Login, Dashboard): je Modus ist eine sichtbar. */
html:not([data-theme="light"]) .flw-logo--on-light,
html[data-theme="light"] .flw-logo--on-dark { display: none !important; }