/* FF — palettes communes. Spécificité supérieure aux styles Angular et aux anciens thèmes. */
html:root[data-ff-theme="cool"] {
  color-scheme: light;
  --bg: #edf8f5;
  --surface: #ffffff;
  --surface-2: #e1f1ec;
  --surface-3: #d2e8e0;
  --surface-hover: #e1f1ec;
  --border: #b5d4ca;
  --border-strong: #4b6f66;
  --text: #123c35;
  --text-2: #365e56;
  --text-3: #4b6f66;
  --accent: #087f70;
  --ff-accent: #087f70;
  --accent-strong: #06675b;
  --accent-ink: #087f70;
  --on-accent: #ffffff;
  --r-md: 20px;
  --r-lg: calc(20px + 6px);
  --display: "DM Sans", system-ui, sans-serif;
  --font: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --ok: #16703b;
  --warn: #8e530a;
  --danger: #b42335;
  --info: #2454b8;
  --on-ok: #ffffff;
  --scrim: #10213966;
}
html:root[data-ff-theme="studio"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #eaf0f7;
  --surface-3: #dde5ef;
  --surface-hover: #eaf0f7;
  --border: #c0ccdd;
  --border-strong: #546780;
  --text: #182338;
  --text-2: #42536c;
  --text-3: #546780;
  --accent: #315bd6;
  --ff-accent: #315bd6;
  --accent-strong: #2548b0;
  --accent-ink: #315bd6;
  --on-accent: #ffffff;
  --r-md: 12px;
  --r-lg: calc(12px + 6px);
  --display: "DM Sans", system-ui, sans-serif;
  --font: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --ok: #16703b;
  --warn: #8e530a;
  --danger: #b42335;
  --info: #2454b8;
  --on-ok: #ffffff;
  --scrim: #10213966;
}
html:root[data-ff-theme="graphite"] {
  color-scheme: dark;
  --bg: #111820;
  --surface: #1b2530;
  --surface-2: #263340;
  --surface-3: #304150;
  --surface-hover: #263340;
  --border: #445769;
  --border-strong: #a6b7c9;
  --text: #edf2f8;
  --text-2: #c2cfdd;
  --text-3: #a6b7c9;
  --accent: #8eb5ff;
  --ff-accent: #8eb5ff;
  --accent-strong: #b4cdff;
  --accent-ink: #8eb5ff;
  --on-accent: #102342;
  --r-md: 10px;
  --r-lg: calc(10px + 6px);
  --display: "DM Sans", system-ui, sans-serif;
  --font: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --ok: #6ee7a0;
  --warn: #ffd078;
  --danger: #ff969e;
  --info: #92c5ff;
  --on-ok: #102818;
  --scrim: #030711b3;
}
html:root[data-ff-theme="signature"] {
  color-scheme: light;
  --bg: #f6f1e8;
  --surface: #fffdf8;
  --surface-2: #efe7da;
  --surface-3: #e4d8c4;
  --surface-hover: #efe7da;
  --border: #cbb894;
  --border-strong: #77634b;
  --text: #32271d;
  --text-2: #67543d;
  --text-3: #77634b;
  --accent: #90631b;
  --ff-accent: #90631b;
  --accent-strong: #755016;
  --accent-ink: #90631b;
  --on-accent: #ffffff;
  --r-md: 16px;
  --r-lg: calc(16px + 6px);
  --display: Georgia, "Times New Roman", serif;
  --font: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --ok: #16703b;
  --warn: #8e530a;
  --danger: #b42335;
  --info: #2454b8;
  --on-ok: #ffffff;
  --scrim: #10213966;
}
html:root[data-ff-theme="cosmic"] {
  color-scheme: dark;
  --bg: #100d22;
  --surface: #1c1635;
  --surface-2: #2b2249;
  --surface-3: #392e5c;
  --surface-hover: #2b2249;
  --border: #574575;
  --border-strong: #b9a6d9;
  --text: #f2edff;
  --text-2: #d1c4ed;
  --text-3: #b9a6d9;
  --accent: #c3a4ff;
  --ff-accent: #c3a4ff;
  --accent-strong: #ddcaff;
  --accent-ink: #c3a4ff;
  --on-accent: #211139;
  --r-md: 24px;
  --r-lg: calc(24px + 6px);
  --display: "DM Sans", system-ui, sans-serif;
  --font: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --ok: #6ee7a0;
  --warn: #ffd078;
  --danger: #ff969e;
  --info: #92c5ff;
  --on-ok: #102818;
  --scrim: #030711b3;
}
html:root[data-ff-theme] {
  --accent-soft: color-mix(in srgb, var(--ff-accent) 13%, var(--surface));
  --bg-grad: radial-gradient(ellipse at 5% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
  --top-bg: color-mix(in srgb, var(--surface) 93%, transparent);
  --topbar-bg: var(--top-bg);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
  --r-sm: calc(var(--r-md) * .7);
  --shadow-sm: 0 2px 5px #0000000c;
  --shadow-md: 0 8px 28px -12px color-mix(in srgb, var(--text) 25%, transparent);
  --shadow-lg: 0 24px 70px -20px color-mix(in srgb, var(--text) 30%, transparent);
  --brand-500: var(--accent);
  --brand-600: var(--accent);
  --brand-700: var(--accent-strong);
  --badge-bg: var(--surface);
  --badge-text: var(--text);
  --on-badge: var(--on-accent);
  --cb: var(--info);
  --esp: var(--ok);
  --ok-soft: color-mix(in srgb, var(--ok) 12%, var(--surface));
  --warn-soft: color-mix(in srgb, var(--warn) 12%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --info-soft: color-mix(in srgb, var(--info) 12%, var(--surface));
  --cb-soft: color-mix(in srgb, var(--cb) 12%, var(--surface));
  --esp-soft: color-mix(in srgb, var(--esp) 12%, var(--surface));
  --rw-bg: var(--bg);
  --rw-surface: var(--surface);
  --rw-surface-2: var(--surface-2);
  --rw-surface-3: var(--surface-3);
  --rw-text: var(--text);
  --rw-text-2: var(--text-2);
  --rw-muted: var(--text-3);
  --rw-gold: var(--accent);
  --rw-gold-strong: var(--accent-strong);
  --rw-gold-soft: var(--accent);
  --rw-accent-soft: var(--accent-soft);
  --rw-on-accent: var(--on-accent);
  --rw-wood: var(--text-2);
  --rw-border: var(--border);
  --rw-border-strong: var(--border-strong);
  --rw-ok: var(--ok);
  --rw-ok-soft: var(--ok-soft);
  --rw-warn: var(--warn);
  --rw-warn-soft: var(--warn-soft);
  --rw-danger: var(--danger);
  --rw-danger-soft: var(--danger-soft);
  --rw-shadow-sm: var(--shadow-sm);
  --rw-shadow-md: var(--shadow-md);
  --rw-shadow-lg: var(--shadow-lg);
  --rw-scrim: var(--scrim);
  --rw-top-bg: var(--top-bg);
}
html:root[data-ff-theme="cosmic"] { --bg-grad: radial-gradient(ellipse at 0% 0%, #874cff26, transparent 55%), radial-gradient(ellipse at 100% 80%, #1ed9cd12, transparent 55%); }
@media screen {
  html[data-ff-theme] body { background: var(--bg-grad), var(--bg); color: var(--text); font-family: var(--font); background-attachment: fixed; }
}
html[data-ff-theme] :focus-visible { outline: 3px solid var(--ff-accent); outline-offset: 3px; }
html[data-ff-theme] .brand-mark, html[data-ff-theme] .hub-ff { color: var(--on-accent); }
html[data-ff-theme] .hub-blob { background: var(--accent); }
html[data-ff-theme] .hub-blob.b2 { background: var(--info); }
html[data-ff-theme] .hub-blob.b3 { background: var(--ok); }

/* Prix emploie --accent pour un fond doux, et --green pour l'action principale. */
html:root[data-ff-theme][data-ff-app="prix"] {
  --ink: var(--text); --ink-2: var(--text-2); --muted: var(--text-3);
  --hover: var(--surface-2); --line: var(--border); --line-strong: var(--border-strong);
  --green: var(--ff-accent); --green-strong: var(--accent-strong);
  --accent: var(--accent-soft); --accent-ink: var(--ff-accent);
  --ring: color-mix(in srgb, var(--ff-accent) 45%, transparent);
  --nav: var(--surface); --nav-2: var(--surface-2); --nav-3: var(--surface-3);
  --nav-ink: var(--text-2); --nav-ink-2: var(--text);
  --nav-on: var(--accent-soft); --nav-on-ink: var(--ff-accent);
  --danger-strong: var(--danger); --danger-line: var(--danger);
  --warn-line: var(--warn); --shadow: #00000022; --radius: var(--r-md);
}
/* Caissette : correspondances des couleurs Tailwind, sans toucher aux données. */
html:root[data-ff-theme][data-ff-app="caissette"] {
  --color-gray-50: var(--bg); --color-gray-100: var(--surface-2);
  --color-gray-200: var(--border); --color-gray-300: var(--border-strong);
  --color-gray-400: var(--text-3); --color-gray-500: var(--text-2);
  --color-gray-600: var(--text-2); --color-gray-700: var(--text);
  --color-gray-800: var(--text); --color-gray-900: var(--text);
  --color-blue-50: var(--accent-soft); --color-blue-100: var(--accent-soft);
  --color-blue-500: var(--ff-accent); --color-blue-600: var(--ff-accent);
  --color-blue-700: var(--accent-strong); --color-blue-800: var(--accent-strong);
  --color-brand-50: var(--accent-soft); --color-brand-100: var(--accent-soft);
  --color-brand-500: var(--ff-accent); --color-brand-600: var(--ff-accent);
  --color-brand-700: var(--accent-strong); --color-brand-800: var(--accent-strong);
  --color-brand-900: var(--accent-strong);
}
html[data-ff-app="caissette"][data-ff-theme] .bg-white { background-color: var(--surface); }
html[data-ff-app="caissette"][data-ff-theme] .text-white { color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) {
  html[data-ff-theme] .hub-blob, html[data-ff-theme] .hub-grille { animation: none; }
}

html[data-ff-app="caissette"][data-ff-theme] nav.bg-gradient-to-b { background: var(--surface); border-right: 1px solid var(--border); }
html[data-ff-app="caissette"][data-ff-theme] nav .text-white { color: var(--text); }
html[data-ff-app="caissette"][data-ff-theme] nav .bg-blue-600 .text-white { color: var(--on-accent); }
html[data-ff-app="caissette"][data-ff-theme] nav .border-gray-800 { border-color: var(--border); }