/**
 * Thème produit — variables et utilitaires communs (Formaster / Formons / Learn).
 * Les couleurs effectives viennent de PRODUCT.branding via product-theme.js.
 */

:root {
  --product-primary: #1cb7e6;
  --product-primary-dark: #0d9bc8;
  --product-primary-mid: #1cb7e6;
  --product-primary-light: #7dd3f0;
}

/* Utilitaires sémantiques (login, header admin…) */
.product-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--product-primary-mid) 0%, var(--product-primary-dark) 100%);
}
.product-blob-a {
  background-color: var(--product-primary);
}
.product-blob-b {
  background-color: var(--product-primary-light);
  opacity: 0.35;
}
.product-btn-primary {
  background-color: var(--product-primary);
  color: #fff;
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--product-primary) 25%, transparent);
}
.product-btn-primary:hover {
  background-color: var(--product-primary-dark);
}
.product-input:focus {
  border-color: color-mix(in srgb, var(--product-primary) 55%, transparent) !important;
}

/* Formaster : remapper les couleurs Formons (rouge) et Learn (cyan) codées en dur dans Tailwind */
html.product-formaster {
  --v2-card-shadow-hover: 0 8px 24px -8px rgba(21, 128, 61, 0.22), 0 2px 4px rgba(0, 0, 0, 0.06);
}

html.product-formaster .text-\[\#A83226\],
html.product-formaster .text-\[\#8B2A20\],
html.product-formaster .text-\[\#1CB7E6\],
html.product-formaster .text-\[\#0D9BC8\] {
  color: var(--product-primary) !important;
}

html.product-formaster .hover\:text-\[\#A83226\]:hover,
html.product-formaster .hover\:text-\[\#8B2A20\]:hover {
  color: var(--product-primary-dark) !important;
}

html.product-formaster .bg-\[\#A83226\],
html.product-formaster .bg-\[\#1CB7E6\] {
  background-color: var(--product-primary) !important;
}

html.product-formaster .hover\:bg-\[\#8B2A20\]:hover,
html.product-formaster .hover\:bg-\[\#0D9BC8\]:hover {
  background-color: var(--product-primary-dark) !important;
}

html.product-formaster .bg-\[\#A83226\]\/10,
html.product-formaster .bg-\[\#8B2A20\]\/10,
html.product-formaster .hover\:bg-\[\#8B2A20\]\/10:hover {
  background-color: color-mix(in srgb, var(--product-primary) 10%, transparent) !important;
}

html.product-formaster .border-\[\#A83226\]\/20,
html.product-formaster .border-\[\#A83226\]\/25,
html.product-formaster .border-\[\#A83226\]\/30,
html.product-formaster .border-\[\#A83226\]\/40 {
  border-color: color-mix(in srgb, var(--product-primary) 30%, transparent) !important;
}

html.product-formaster .ring-\[\#A83226\]\/30,
html.product-formaster .ring-\[\#A83226\]\/40,
html.product-formaster .ring-\[\#A83226\]\/50,
html.product-formaster .focus-visible\:ring-\[\#A83226\]:focus-visible {
  --tw-ring-color: color-mix(in srgb, var(--product-primary) 40%, transparent) !important;
}

html.product-formaster .from-\[\#A83226\] {
  --tw-gradient-from: var(--product-primary-mid) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(22 101 52 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html.product-formaster .to-\[\#8B2A20\] {
  --tw-gradient-to: var(--product-primary-dark) var(--tw-gradient-to-position) !important;
}

html.product-formaster .peer:checked ~ .peer-checked\:bg-\[\#A83226\] {
  background-color: var(--product-primary) !important;
}

html.product-formaster .accent-\[\#A83226\] {
  accent-color: var(--product-primary) !important;
}

html.product-formaster .has-\[\:checked\]\:border-\[\#A83226\]:has(:checked) {
  border-color: var(--product-primary) !important;
}

html.product-formaster .has-\[\:checked\]\:ring-\[\#A83226\]\/30:has(:checked) {
  --tw-ring-color: color-mix(in srgb, var(--product-primary) 30%, transparent) !important;
}

html.product-formaster .hover\:border-\[\#A83226\]\/40:hover {
  border-color: color-mix(in srgb, var(--product-primary) 40%, transparent) !important;
}

html.product-formaster .shadow-\[\#A83226\]\/20 {
  --tw-shadow-color: color-mix(in srgb, var(--product-primary) 20%, transparent) !important;
}

html.product-formaster .bg-red-50\/60 {
  background-color: color-mix(in srgb, var(--product-primary-light) 18%, #fff) !important;
}

html.product-formaster .bg-cyan-50 {
  background-color: color-mix(in srgb, var(--product-primary) 8%, #fff) !important;
}

html.product-formaster .text-cyan-600 {
  color: var(--product-primary-dark) !important;
}

html.product-formaster .bg-\[\#C94A3D\] {
  background-color: var(--product-primary-light) !important;
}

html.product-formaster [stroke="#A83226"],
html.product-formaster [stroke="#8B2A20"] {
  stroke: var(--product-primary) !important;
}

html.product-formaster .v2-avatar {
  background: linear-gradient(135deg, var(--product-primary-mid), var(--product-primary-dark));
}

/* Pages marketing (index) — tokens Tailwind f-accent / f-accent2 */
html.product-formaster .text-f-accent,
html.product-formaster .hover\:text-f-accent:hover {
  color: var(--product-primary) !important;
}
html.product-formaster .bg-f-accent,
html.product-formaster .hover\:bg-f-accent:hover {
  background-color: var(--product-primary) !important;
}
html.product-formaster .from-f-accent {
  --tw-gradient-from: var(--product-primary-mid) var(--tw-gradient-from-position) !important;
}
html.product-formaster .to-f-accent2 {
  --tw-gradient-to: var(--product-primary-dark) var(--tw-gradient-to-position) !important;
}
html.product-formaster .border-f-accent\/20 {
  border-color: color-mix(in srgb, var(--product-primary) 20%, transparent) !important;
}