/**
 * Food Lab OS — Material Identity System (Golden Master)
 * Source: docs_ai/architecture/ux/golden_master/ (TAVOLA 03–08)
 * Product UI substrate — not a new Component contract.
 * In conflict with other CSS: Golden Master wins.
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/documenti/CormorantGaramond-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/documenti/Inter-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Layer 01 · System ── */
  --fl-mi-avorio: #f7f5f2;
  --fl-mi-carta: #f1ece6;
  --fl-mi-carta-elevated: #fffcf9;

  /*
   * Warm Taupe law (CR-0005 · CR-0005.1 · CR-0005.2 · CR-UX light action):
   *   Soft  = Guidance AND standard action fill — same family as selected sidebar
   *           (#DED9D4 · quiet · grafite ink · no dark fill)
   *   Full  = reserved for rare dominance accents — NOT the default action fill
   * Soft is global: tabs, chips, filters, segments, soft nav, action buttons.
   * Navigation is located, never attracted to. Content speaks. Buttons whisper.
   */
  --fl-mi-taupe: #b0a79e; /* Full — rare accent / stronger border only */
  --fl-mi-taupe-deep: #9a9188; /* Full hover (legacy; not default action) */
  --fl-mi-taupe-soft: #ded9d4; /* Guidance + standard action surface */
  --fl-mi-taupe-soft-deep: #d5d0ca; /* Guidance / action hover */
  --fl-mi-taupe-wash: #e8e3dc; /* Quiet paper wash (never a nav fill) */

  /* ── GLOBAL LIGHT ACTION BUTTON CANON (CR-UX) ──
   * Reference: selected sidebar item (.fl-shell-nav__item.is-active).
   * Dark filled buttons are NOT part of the standard action hierarchy.
   * Hierarchy = tonal weight + border + typography — never dark fill.
   */
  --fl-action-bg: var(--fl-mi-taupe-soft);
  --fl-action-bg-hover: var(--fl-mi-taupe-soft-deep);
  --fl-action-bg-active: color-mix(in srgb, var(--fl-mi-taupe-soft-deep) 82%, var(--fl-mi-taupe) 18%);
  --fl-action-bg-quiet: var(--fl-mi-carta-elevated);
  --fl-action-bg-quiet-hover: color-mix(in srgb, var(--fl-mi-taupe-wash) 55%, var(--fl-mi-carta-elevated));
  --fl-action-bg-disabled: var(--fl-mi-fn-cancel, #dbd9d3);
  --fl-action-ink: var(--fl-mi-grafite);
  --fl-action-ink-muted: var(--fl-mi-grafite-soft);
  --fl-action-ink-disabled: var(--fl-mi-fn-cancel-ink, #8a837c);
  --fl-action-border: color-mix(in srgb, var(--fl-mi-taupe) 28%, var(--fl-mi-taupe-soft) 72%);
  --fl-action-border-strong: color-mix(in srgb, var(--fl-mi-taupe) 48%, var(--fl-mi-grafite) 8%);
  --fl-action-border-quiet: color-mix(in srgb, var(--fl-mi-taupe-soft) 70%, transparent);
  --fl-action-radius: 9px;
  --fl-action-height: 32px;
  --fl-action-height-compact: 28px;
  --fl-action-height-lg: 36px;
  --fl-action-pad-x: 15px;
  --fl-action-pad-x-compact: 11px;
  --fl-action-pad-x-lg: 18px;
  --fl-action-font-size: 13.5px;
  --fl-action-font-weight: 600;
  --fl-action-font-weight-quiet: 550;
  --fl-action-focus-ring: 0 0 0 2px var(--fl-mi-carta-elevated),
    0 0 0 4px color-mix(in srgb, var(--fl-mi-taupe) 42%, transparent);
  --fl-action-shadow: none;

  --fl-mi-grafite: #2d2623;
  --fl-mi-grafite-soft: #5c5550;
  --fl-mi-ink-quiet: #8a837c;

  /* ── Layer 02 · Business worlds ── */
  --fl-mi-world-matrimoni: #f6e5e3;
  --fl-mi-world-matrimoni-ink: #8f6f6c;
  --fl-mi-world-aziendali: #2b2b2b;
  --fl-mi-world-aziendali-soft: #f1ece6;
  --fl-mi-world-fiere: #a9b09e;
  --fl-mi-world-fiere-soft: #e8efe8;
  --fl-mi-world-privati: #c47b5a;
  --fl-mi-world-privati-soft: #f3e6de;
  --fl-mi-world-produzioni: #9a7048;
  --fl-mi-world-produzioni-soft: #f2e4d4;

  /* Active world defaults to system until host sets data-fl-world */
  --fl-mi-world: var(--fl-mi-world-matrimoni);
  --fl-mi-world-ink: var(--fl-mi-world-matrimoni-ink);
  --fl-mi-world-soft: var(--fl-mi-world-matrimoni);

  /*
   * ── Layer 02b · Business Unit Identity (CR-0024) ──
   * Semantic accent tokens — never hardcode BU hex in feature CSS.
   * Whisper only: hero / badge / active / primary / focus / chips / KPI / progress.
   * Material Identity (paper, taupe, graphite, cards) stays immutable.
   * Defaults = Wedding until host sets [data-bu].
   */
  --fl-bu-primary: #a67c7a;
  --fl-bu-soft: #f4e9e8;
  --fl-bu-soft-hover: #ecdcdb;
  --fl-bu-border: color-mix(in srgb, #a67c7a 28%, transparent);
  --fl-bu-focus: color-mix(in srgb, #a67c7a 32%, transparent);
  --fl-bu-chip: #f4e9e8;
  --fl-bu-accent: #8f6f6c;

  /* ── Layer 03 · Functional (dusty) ── */
  --fl-mi-fn-success: #c8d4c6;
  --fl-mi-fn-success-ink: #4a5c48;
  --fl-mi-fn-prep: #e6dfc9;
  --fl-mi-fn-prep-ink: #6e6548;
  --fl-mi-fn-verify: #f2e0c6;
  --fl-mi-fn-verify-ink: #8a6a3a;
  --fl-mi-fn-critical: #b76a6e;
  --fl-mi-fn-critical-soft: #f3e4e5;
  --fl-mi-fn-critical-ink: #7a4044;
  --fl-mi-fn-cancel: #dbd9d3;
  --fl-mi-fn-cancel-ink: #6b6762;
  --fl-mi-fn-draft: #f2efea;
  --fl-mi-fn-draft-ink: #6b6560;
  --fl-mi-fn-published: #4b4745;

  /* Depth — soft natural light (never hard) */
  --fl-mi-shadow-1: 0 1px 2px rgba(45, 38, 35, 0.03), 0 6px 20px rgba(45, 38, 35, 0.04);
  --fl-mi-shadow-2: 0 2px 4px rgba(45, 38, 35, 0.03), 0 14px 36px rgba(45, 38, 35, 0.07);
  --fl-mi-shadow-3: 0 8px 28px rgba(45, 38, 35, 0.1), 0 2px 6px rgba(45, 38, 35, 0.04);

  /* Type */
  --fl-mi-font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fl-mi-font-ui: "Inter", system-ui, -apple-system, sans-serif;

  /* Radius — soft geometry (TAVOLA 07) */
  --fl-mi-radius-sm: 8px;
  --fl-mi-radius-md: 14px;
  --fl-mi-radius-lg: 18px;
  --fl-mi-radius-pill: 999px;
}

[data-fl-world='matrimoni'] {
  --fl-mi-world: #e8c9c5;
  --fl-mi-world-soft: var(--fl-mi-world-matrimoni);
  --fl-mi-world-ink: var(--fl-mi-world-matrimoni-ink);
}

[data-fl-world='aziendali'] {
  --fl-mi-world: var(--fl-mi-world-aziendali);
  --fl-mi-world-soft: var(--fl-mi-world-aziendali-soft);
  --fl-mi-world-ink: var(--fl-mi-world-aziendali);
}

[data-fl-world='fiere'] {
  --fl-mi-world: var(--fl-mi-world-fiere);
  --fl-mi-world-soft: var(--fl-mi-world-fiere-soft);
  --fl-mi-world-ink: #5f6b5b;
}

[data-fl-world='privati'] {
  --fl-mi-world: var(--fl-mi-world-privati);
  --fl-mi-world-soft: var(--fl-mi-world-privati-soft);
  --fl-mi-world-ink: #6e4e3d;
}

[data-fl-world='produzioni'] {
  --fl-mi-world: var(--fl-mi-world-produzioni);
  --fl-mi-world-soft: var(--fl-mi-world-produzioni-soft);
  --fl-mi-world-ink: #6a4a2e;
}

/* CR-0024 — semantic BU palettes (Commessa + hosts that set data-bu) */
[data-bu='wedding'],
[data-fl-world='matrimoni'] {
  --fl-bu-primary: #a67c7a;
  --fl-bu-soft: #f4e9e8;
  --fl-bu-soft-hover: #ecdcdb;
  --fl-bu-border: color-mix(in srgb, #a67c7a 28%, transparent);
  --fl-bu-focus: color-mix(in srgb, #a67c7a 32%, transparent);
  --fl-bu-chip: #f4e9e8;
  --fl-bu-accent: #8f6f6c;
}

[data-bu='corporate'],
[data-fl-world='aziendali'] {
  /* Warm charcoal / carta — executive, quiet (no steel / blue-grey ERP) */
  --fl-bu-primary: #5c5550;
  --fl-bu-soft: #f1ece6;
  --fl-bu-soft-hover: #e8e3dc;
  --fl-bu-border: color-mix(in srgb, #5c5550 28%, transparent);
  --fl-bu-focus: color-mix(in srgb, #5c5550 32%, transparent);
  --fl-bu-chip: #f1ece6;
  --fl-bu-accent: #2d2623;
  /* Align world whisper with warm charcoal (never steel / blue-grey ERP soft) */
  --fl-mi-world: #5c5550;
  --fl-mi-world-soft: #f1ece6;
  --fl-mi-world-ink: #2d2623;
}

[data-bu='private'],
[data-fl-world='privati'] {
  --fl-bu-primary: #c47b5a;
  --fl-bu-soft: #f3e6de;
  --fl-bu-soft-hover: #ead7cb;
  --fl-bu-border: color-mix(in srgb, #c47b5a 28%, transparent);
  --fl-bu-focus: color-mix(in srgb, #c47b5a 32%, transparent);
  --fl-bu-chip: #f3e6de;
  --fl-bu-accent: #6e4e3d;
}

[data-bu='fair'],
[data-fl-world='fiere'] {
  --fl-bu-primary: #7d8f74;
  --fl-bu-soft: #e8efe8;
  --fl-bu-soft-hover: #dce6dc;
  --fl-bu-border: color-mix(in srgb, #7d8f74 28%, transparent);
  --fl-bu-focus: color-mix(in srgb, #7d8f74 32%, transparent);
  --fl-bu-chip: #e8efe8;
  --fl-bu-accent: #5f6b5b;
}

[data-bu='production'],
[data-fl-world='produzioni'] {
  --fl-bu-primary: #9a7048;
  --fl-bu-soft: #f2e4d4;
  --fl-bu-soft-hover: #ead9c6;
  --fl-bu-border: color-mix(in srgb, #9a7048 28%, transparent);
  --fl-bu-focus: color-mix(in srgb, #9a7048 32%, transparent);
  --fl-bu-chip: #f2e4d4;
  --fl-bu-accent: #6a4a2e;
}

/* ── CR-0005.2 · Warm Taupe Soft = Guidance (global) ──
   Soft = selected / contextual / secondary — whisper, never CTA.
   Full (--fl-mi-taupe) stays reserved for true Primary actions only.
   Do not hardcode Soft hex in feature CSS; consume these tokens/variants.
*/

/* Shared Soft selected surface (tabs, chips, filters, segments, soft nav) */
.fl-tab.is-active,
.fl-tab[aria-selected='true'],
.fl-tab-active,
.stand-tab-btn.is-active,
.fl-chip[aria-pressed='true'],
.fl-chip[aria-checked='true'],
.fl-chip.is-selected,
.fl-chip--selected,
.fl-chip:has(.fl-chip__toggle[aria-pressed='true']),
.fl-chip:has(.fl-chip__toggle[aria-checked='true']),
.fl-seg__item.is-selected,
.fl-seg__item[aria-selected='true'],
.fl-seg__item[aria-pressed='true'],
.fl-filter.is-active,
.fl-filter[aria-pressed='true'],
.fl-filter.is-selected,
.fl-mi-soft-selected {
  background: var(--fl-mi-taupe-soft);
  border-color: transparent;
  color: var(--fl-mi-grafite);
  box-shadow: none;
  font-weight: var(--fl-weight-semibold, 600);
}

.fl-tab.is-active:hover:not(:disabled):not([aria-disabled='true']),
.fl-tab[aria-selected='true']:hover:not(:disabled):not([aria-disabled='true']),
.stand-tab-btn.is-active:hover:not(:disabled),
.fl-chip[aria-pressed='true']:hover:not(:disabled),
.fl-chip[aria-checked='true']:hover:not(:disabled),
.fl-chip.is-selected:hover:not(:disabled),
.fl-chip--selected:hover:not(:disabled),
.fl-chip:has(.fl-chip__toggle[aria-pressed='true']):hover,
.fl-seg__item.is-selected:hover,
.fl-seg__item[aria-selected='true']:hover,
.fl-filter.is-active:hover,
.fl-filter[aria-pressed='true']:hover,
.fl-mi-soft-selected:hover {
  background: var(--fl-mi-taupe-soft-deep);
  border-color: transparent;
  color: var(--fl-mi-grafite);
  box-shadow: none;
}

/* Soft idle — resting companion for Soft selected (segments / filters / soft nav) */
.fl-mi-soft-idle {
  background: transparent;
  border-color: transparent;
  color: var(--fl-mi-ink-quiet);
  box-shadow: none;
  font-weight: var(--fl-weight-medium, 500);
}

.fl-mi-soft-idle:hover {
  background: color-mix(in srgb, var(--fl-mi-taupe-soft) 45%, transparent);
  color: var(--fl-mi-grafite);
  box-shadow: none;
}

/* Soft secondary / contextual action — whisper fill, never Full Taupe */
.fl-btn-soft,
.fl-mi-btn-soft {
  background: var(--fl-mi-taupe-soft);
  border: 1px solid transparent;
  color: var(--fl-mi-grafite);
  box-shadow: none;
}

.fl-btn-soft:hover:not(:disabled):not([aria-disabled='true']),
.fl-mi-btn-soft:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--fl-mi-taupe-soft-deep);
  border-color: transparent;
  color: var(--fl-mi-grafite);
  box-shadow: none;
}

.fl-btn-soft:active:not(:disabled):not([aria-disabled='true']),
.fl-mi-btn-soft:active:not(:disabled):not([aria-disabled='true']) {
  background: var(--fl-mi-taupe-soft-deep);
  box-shadow: none;
}

/* Soft secondary navigation (module crumbs / residual subnav) */
.fl-mi-nav-soft {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--fl-mi-grafite-soft);
  text-decoration: none;
  box-shadow: none;
}

.fl-mi-nav-soft:hover {
  background: color-mix(in srgb, var(--fl-mi-taupe-soft) 45%, transparent);
  color: var(--fl-mi-grafite);
  box-shadow: none;
}

.fl-mi-nav-soft.is-active,
.fl-mi-nav-soft[aria-current='page'] {
  background: var(--fl-mi-taupe-soft);
  color: var(--fl-mi-grafite);
  box-shadow: none;
  font-weight: var(--fl-weight-semibold, 600);
}

/* Soft segmented track — quiet host for Soft selected items */
.fl-mi-seg,
.fl-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--fl-mi-taupe-soft) 40%, transparent);
  border-radius: var(--fl-mi-radius-md);
  background: color-mix(in srgb, var(--fl-mi-carta) 70%, transparent);
  box-shadow: none;
}

.fl-mi-seg > a,
.fl-mi-seg > button,
.fl-seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: calc(var(--fl-mi-radius-md) - 4px);
  background: transparent;
  color: var(--fl-mi-ink-quiet);
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.fl-mi-seg > a.fl-mi-soft-selected,
.fl-mi-seg > button.fl-mi-soft-selected,
.fl-mi-seg > a[aria-selected='true'],
.fl-mi-seg > button[aria-selected='true'],
.fl-seg__item.is-selected,
.fl-seg__item[aria-selected='true'],
.fl-seg__item[aria-pressed='true'] {
  background: var(--fl-mi-taupe-soft);
  border-color: transparent;
  color: var(--fl-mi-grafite);
  box-shadow: none;
  font-weight: var(--fl-weight-semibold, 600);
}

.fl-mi-seg > a.fl-mi-soft-idle:hover,
.fl-mi-seg > button.fl-mi-soft-idle:hover,
.fl-seg__item:not(.is-selected):not([aria-selected='true']):hover {
  background: color-mix(in srgb, var(--fl-mi-taupe-soft) 45%, transparent);
  color: var(--fl-mi-grafite);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Warm substrate remap — eliminate cold slate / sky ERP greys app-wide.
   Markup may keep Tailwind slate/sky class names; Golden Master wins on paint.
   Reference: Fiera Madre / Material Identity (avorio · taupe · grafite).
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-slate-50,
.bg-slate-50\/20,
.bg-slate-50\/30,
.bg-slate-50\/40,
.bg-slate-50\/50,
.bg-slate-50\/60,
.bg-slate-50\/70,
.bg-slate-50\/80,
.bg-slate-50\/90 {
  background-color: var(--fl-mi-avorio, #f7f5f2) !important;
}

.bg-slate-100,
.bg-slate-100\/90,
.bg-slate-200 {
  background-color: var(--fl-mi-carta, #f1ece6) !important;
}

.bg-slate-300 {
  background-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.bg-slate-400,
.bg-slate-500 {
  background-color: var(--fl-mi-taupe, #b0a79e) !important;
}

.bg-slate-600,
.bg-slate-700,
.bg-slate-800,
.bg-slate-900 {
  background-color: var(--fl-mi-grafite, #2d2623) !important;
  color: var(--fl-mi-carta-elevated, #fffcf9) !important;
}

.hover\:bg-slate-50:hover,
.hover\:bg-slate-50\/50:hover,
.hover\:bg-slate-50\/60:hover,
.hover\:bg-slate-50\/70:hover,
.hover\:bg-slate-50\/80:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-slate-200:hover {
  background-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.hover\:bg-slate-700:hover,
.hover\:bg-slate-800:hover {
  background-color: var(--fl-mi-grafite-soft, #5c5550) !important;
}

.text-slate-300,
.text-slate-400,
.text-slate-400\/80 {
  color: var(--fl-mi-ink-quiet, #8a837c) !important;
}

.placeholder\:text-slate-300::-moz-placeholder,
.placeholder\:text-slate-300::placeholder,
.placeholder\:text-slate-400::-moz-placeholder,
.placeholder\:text-slate-400::placeholder {
  color: var(--fl-mi-ink-quiet, #8a837c) !important;
}

.file\:bg-slate-100::file-selector-button {
  background-color: var(--fl-mi-carta, #f1ece6) !important;
}

.file\:text-slate-600::file-selector-button {
  color: var(--fl-mi-grafite-soft, #5c5550) !important;
}

.decoration-slate-300 {
  text-decoration-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.text-slate-500,
.text-slate-600 {
  color: var(--fl-mi-grafite-soft, #5c5550) !important;
}

.text-slate-700,
.text-slate-800,
.text-slate-900 {
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.hover\:text-slate-500:hover,
.hover\:text-slate-600:hover,
.hover\:text-slate-700:hover,
.hover\:text-slate-800:hover,
.hover\:text-slate-900:hover,
.group:hover .group-hover\:text-slate-500 {
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.border-slate-50,
.border-slate-100,
.border-slate-100\/80,
.border-slate-200,
.border-slate-200\/80,
.border-slate-300,
.border-slate-800\/10 {
  border-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.border-slate-800 {
  border-color: var(--fl-mi-grafite, #2d2623) !important;
}

.border-slate-400,
.border-slate-500 {
  border-color: var(--fl-mi-taupe, #b0a79e) !important;
}

.hover\:border-slate-100:hover,
.hover\:border-slate-200:hover,
.hover\:border-slate-300:hover {
  border-color: var(--fl-mi-taupe, #b0a79e) !important;
}

.divide-slate-50 > :not([hidden]) ~ :not([hidden]),
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-100\/80 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.ring-slate-100,
.ring-slate-200,
.ring-slate-200\/80,
.ring-slate-300,
.focus\:ring-slate-200:focus,
.focus\:ring-slate-300:focus {
  --tw-ring-color: color-mix(in srgb, var(--fl-mi-taupe, #b0a79e) 42%, transparent) !important;
}

.ring-slate-700,
.ring-slate-900 {
  --tw-ring-color: color-mix(in srgb, var(--fl-mi-grafite, #2d2623) 55%, transparent) !important;
}

.focus\:border-slate-300:focus,
.focus\:border-slate-400:focus {
  border-color: var(--fl-mi-taupe, #b0a79e) !important;
}

/* Slate overlays / gradients — warm grafite, never blue-black ERP */
.bg-slate-900\/25 {
  background-color: color-mix(in srgb, var(--fl-mi-grafite, #2d2623) 25%, transparent) !important;
}

.bg-slate-900\/40 {
  background-color: color-mix(in srgb, var(--fl-mi-grafite, #2d2623) 40%, transparent) !important;
}

.bg-slate-900\/50 {
  background-color: color-mix(in srgb, var(--fl-mi-grafite, #2d2623) 50%, transparent) !important;
}

.bg-slate-900\/60 {
  background-color: color-mix(in srgb, var(--fl-mi-grafite, #2d2623) 60%, transparent) !important;
}

.from-slate-50,
.from-slate-200 {
  --tw-gradient-from: var(--fl-mi-avorio, #f7f5f2) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--fl-mi-avorio, #f7f5f2) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-slate-300 {
  --tw-gradient-to: var(--fl-mi-taupe-soft, #ded9d4) var(--tw-gradient-to-position) !important;
}

.from-slate-900\/50 {
  --tw-gradient-from: color-mix(in srgb, var(--fl-mi-grafite, #2d2623) 50%, transparent) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Gray neutrals → warm carta / taupe / grafite */
.bg-gray-50,
.bg-gray-100,
.bg-gray-100\/80,
.hover\:bg-gray-100\/80:hover {
  background-color: var(--fl-mi-avorio, #f7f5f2) !important;
}

.bg-gray-200 {
  background-color: var(--fl-mi-carta, #f1ece6) !important;
}

.bg-gray-300 {
  background-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.text-gray-400,
.text-gray-500 {
  color: var(--fl-mi-ink-quiet, #8a837c) !important;
}

.text-gray-600,
.text-gray-700 {
  color: var(--fl-mi-grafite-soft, #5c5550) !important;
}

.text-gray-800,
.text-gray-900 {
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.border-gray-200,
.border-gray-300 {
  border-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

/* Blue / indigo ERP accents → warm taupe / grafite (status semantics unchanged for emerald/amber/red) */
.bg-blue-50,
.bg-blue-100,
.bg-indigo-50,
.bg-indigo-100 {
  background-color: var(--fl-mi-taupe-wash, #e8e3dc) !important;
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-indigo-500,
.bg-indigo-600 {
  background-color: var(--fl-mi-taupe, #b0a79e) !important;
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-indigo-900 {
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.border-blue-100,
.border-blue-200,
.border-indigo-100,
.border-indigo-200,
.border-indigo-400 {
  border-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.focus\:ring-blue-500:focus,
.ring-blue-500,
.ring-indigo-500,
.focus\:ring-indigo-500:focus {
  --tw-ring-color: color-mix(in srgb, var(--fl-mi-taupe, #b0a79e) 42%, transparent) !important;
}

/* Sky / azzurro professionale → warm taupe (Food Lab domain + shared) */
.bg-sky-50,
.bg-sky-50\/40,
.bg-sky-50\/50,
.bg-sky-50\/80,
.bg-sky-100,
.bg-sky-200 {
  background-color: var(--fl-mi-taupe-wash, #e8e3dc) !important;
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.from-sky-50 {
  --tw-gradient-from: var(--fl-mi-taupe-wash, #e8e3dc) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--fl-mi-taupe-wash, #e8e3dc) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.bg-sky-400,
.bg-sky-500,
.bg-sky-600,
.bg-sky-700 {
  background-color: var(--fl-mi-taupe, #b0a79e) !important;
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.hover\:bg-sky-50:hover,
.hover\:bg-sky-50\/40:hover,
.hover\:bg-sky-100:hover {
  background-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.hover\:bg-sky-700:hover {
  background-color: var(--fl-mi-taupe-deep, #9a9188) !important;
}

.text-sky-400,
.text-sky-500,
.text-sky-600,
.text-sky-700,
.text-sky-700\/80,
.text-sky-800,
.text-sky-900,
.text-sky-950 {
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.hover\:text-sky-600:hover,
.hover\:text-sky-700:hover {
  color: var(--fl-mi-grafite, #2d2623) !important;
}

.border-sky-100,
.border-sky-200,
.border-sky-200\/80,
.border-sky-300,
.border-sky-400,
.border-sky-500,
.hover\:border-sky-200:hover {
  border-color: var(--fl-mi-taupe-soft, #ded9d4) !important;
}

.focus\:border-sky-400:focus,
.focus\:border-sky-500:focus {
  border-color: var(--fl-mi-taupe, #b0a79e) !important;
}

.focus\:ring-sky-100:focus,
.focus\:ring-sky-200:focus,
.focus\:ring-sky-500:focus,
.focus\:ring-sky-500\/20:focus {
  --tw-ring-color: color-mix(in srgb, var(--fl-mi-taupe, #b0a79e) 35%, transparent) !important;
}

/* Legacy navy utility paint — warm action family */
.bg-fl-navy {
  background-color: var(--fl-action-bg, var(--fl-mi-taupe-soft, #ded9d4)) !important;
  color: var(--fl-action-ink, var(--fl-mi-grafite, #2d2623)) !important;
}

.hover\:bg-fl-navy-light:hover,
.bg-fl-navy:hover {
  background-color: var(--fl-action-bg-hover, var(--fl-mi-taupe-soft-deep, #d5d0ca)) !important;
}

.text-fl-navy {
  color: var(--fl-mi-grafite, #2d2623) !important;
}