/* ============================================================
   AILA Design System — Giada Theme
   Badge component tokens
   ------------------------------------------------------------
   A badge is a pill-shaped label, narrower and denser than a
   button. Four shape variants × three sizes × N color variants
   across two color groups (semantic + nutrient) + signs.

   Shape variants:
   · badge           — label only
   · badge-icon      — icon start/end + label
   · badge-number    — numeric label, tighter padding
   · badge-icon-only — icon only, square aspect

   Style variants (shared): filled (default) · tonal · outlined
   Sizes: sm · md · lg
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     Shared
     ------------------------------------------------------------ */
  --aila-badge-border-width: var(--border-1);
  --aila-badge-transition:
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------
     Size: sm
     ------------------------------------------------------------ */
  --aila-badge-sm-height:                  1.75rem;      /* 28px */
  --aila-badge-sm-padding-x:               var(--spacing-2);
  --aila-badge-sm-padding-y:               0;
  --aila-badge-sm-padding-number-x:        var(--spacing-2);
  --aila-badge-sm-padding-number-y:        0;
  --aila-badge-sm-padding-x-icon-only:     0;
  --aila-badge-sm-padding-y-icon-only:     0;
  --aila-badge-sm-border-radius:           var(--rounded-full);
  --aila-badge-sm-gap:                     var(--spacing-1-5);
  --aila-badge-sm-icon-size:               var(--icon-3);
  --aila-badge-sm-icon-only-size:          var(--icon-4);
  --aila-badge-sm-font-family:             var(--label-sm-font-family);
  --aila-badge-sm-font-size:               var(--label-sm-font-size);
  --aila-badge-sm-font-weight:             var(--label-sm-font-weight);
  --aila-badge-sm-line-height:             var(--label-sm-line-height);

  /* ------------------------------------------------------------
     Size: md
     ------------------------------------------------------------ */
  --aila-badge-md-height:                  2rem;         /* 32px */
  --aila-badge-md-padding-x:               var(--spacing-2-5);
  --aila-badge-md-padding-y:               0;
  --aila-badge-md-padding-number-x:        var(--spacing-2-5);
  --aila-badge-md-padding-number-y:        0;
  --aila-badge-md-padding-x-icon-only:     0;
  --aila-badge-md-padding-y-icon-only:     0;
  --aila-badge-md-border-radius:           var(--rounded-full);
  --aila-badge-md-gap:                     var(--spacing-1-5);
  --aila-badge-md-icon-size:               var(--icon-4);
  --aila-badge-md-icon-only-size:          var(--icon-5);
  --aila-badge-md-font-family:             var(--label-md-font-family);
  --aila-badge-md-font-size:               var(--label-md-font-size);
  --aila-badge-md-font-weight:             var(--label-md-font-weight);
  --aila-badge-md-line-height:             var(--label-md-line-height);

  /* ------------------------------------------------------------
     Size: lg
     ------------------------------------------------------------ */
  --aila-badge-lg-height:                  2.5rem;       /* 40px */
  --aila-badge-lg-padding-x:               var(--spacing-3);
  --aila-badge-lg-padding-y:               0;
  --aila-badge-lg-padding-number-x:        var(--spacing-3);
  --aila-badge-lg-padding-number-y:        0;
  --aila-badge-lg-padding-x-icon-only:     0;
  --aila-badge-lg-padding-y-icon-only:     0;
  --aila-badge-lg-border-radius:           var(--rounded-full);
  --aila-badge-lg-gap:                     var(--spacing-1-5);
  --aila-badge-lg-icon-size:               var(--icon-5);
  --aila-badge-lg-icon-only-size:          var(--icon-6);
  --aila-badge-lg-font-family:             var(--label-lg-font-family);
  --aila-badge-lg-font-size:               var(--label-lg-font-size);
  --aila-badge-lg-font-weight:             var(--label-lg-font-weight);
  --aila-badge-lg-line-height:             var(--label-lg-line-height);

  /* ============================================================
     SEMANTIC COLOR VARIANTS — filled
     ============================================================ */
  --aila-badge-neutral-bg:     var(--neutral-surface);
  --aila-badge-neutral-text:   var(--invert);
  --aila-badge-neutral-border: transparent;

  --aila-badge-primary-bg:     var(--primary-surface);
  --aila-badge-primary-text:   var(--invert);
  --aila-badge-primary-border: transparent;

  --aila-badge-success-bg:     var(--success-surface);
  --aila-badge-success-text:   var(--invert);
  --aila-badge-success-border: transparent;

  --aila-badge-warning-bg:     var(--warning-surface);
  --aila-badge-warning-text:   var(--invert);
  --aila-badge-warning-border: transparent;

  --aila-badge-danger-bg:      var(--danger-surface);
  --aila-badge-danger-text:    var(--invert);
  --aila-badge-danger-border:  transparent;

  /* ============================================================
     SEMANTIC COLOR VARIANTS — tonal
     ============================================================ */
  --aila-badge-neutral-tonal-bg:     var(--neutral-tonal);
  --aila-badge-neutral-tonal-text:   var(--placeholder);
  --aila-badge-neutral-tonal-border: transparent;

  --aila-badge-primary-tonal-bg:     var(--primary-tonal);
  --aila-badge-primary-tonal-text:   var(--primary-action);
  --aila-badge-primary-tonal-border: transparent;

  --aila-badge-success-tonal-bg:     var(--success-tonal);
  --aila-badge-success-tonal-text:   var(--success-action);
  --aila-badge-success-tonal-border: transparent;

  --aila-badge-warning-tonal-bg:     var(--warning-tonal);
  --aila-badge-warning-tonal-text:   var(--warning-action);
  --aila-badge-warning-tonal-border: transparent;

  --aila-badge-danger-tonal-bg:      var(--danger-tonal);
  --aila-badge-danger-tonal-text:    var(--danger-action);
  --aila-badge-danger-tonal-border:  transparent;

  /* ============================================================
     SEMANTIC COLOR VARIANTS — outlined
     Same text/border color as the variant's "action"; transparent bg.
     ============================================================ */
  --aila-badge-neutral-outlined-bg:     transparent;
  --aila-badge-neutral-outlined-text:   var(--neutral-action);
  --aila-badge-neutral-outlined-border: var(--neutral-action);

  --aila-badge-primary-outlined-bg:     transparent;
  --aila-badge-primary-outlined-text:   var(--primary-action);
  --aila-badge-primary-outlined-border: var(--primary-action);

  --aila-badge-success-outlined-bg:     transparent;
  --aila-badge-success-outlined-text:   var(--success-action);
  --aila-badge-success-outlined-border: var(--success-action);

  --aila-badge-warning-outlined-bg:     transparent;
  --aila-badge-warning-outlined-text:   var(--warning-action);
  --aila-badge-warning-outlined-border: var(--warning-action);

  --aila-badge-danger-outlined-bg:      transparent;
  --aila-badge-danger-outlined-text:    var(--danger-action);
  --aila-badge-danger-outlined-border:  var(--danger-action);

  /* ============================================================
     NUTRIENT COLOR VARIANTS (filled only)
     Each nutrient carries a signature surface + invert text/icon.
     ============================================================ */
  --aila-badge-protein-bg:     var(--protein-surface);
  --aila-badge-protein-text:   var(--invert);
  --aila-badge-protein-border: transparent;

  --aila-badge-fiber-bg:     var(--fiber-surface);
  --aila-badge-fiber-text:   var(--invert);
  --aila-badge-fiber-border: transparent;

  --aila-badge-carbo-bg:     var(--carbo-surface);
  --aila-badge-carbo-text:   var(--invert);
  --aila-badge-carbo-border: transparent;

  --aila-badge-fat-bg:     var(--fat-surface);
  --aila-badge-fat-text:   var(--invert);
  --aila-badge-fat-border: transparent;

  --aila-badge-processed-bg:     var(--processed-surface);
  --aila-badge-processed-text:   var(--invert);
  --aila-badge-processed-border: transparent;

  --aila-badge-wine-bg:     var(--wine-surface);
  --aila-badge-wine-text:   var(--invert);
  --aila-badge-wine-border: transparent;

  --aila-badge-water-bg:     var(--water-surface);
  --aila-badge-water-text:   var(--invert);
  --aila-badge-water-border: transparent;

  --aila-badge-food-bg:     var(--kcal-surface);
  --aila-badge-food-text:   var(--invert);
  --aila-badge-food-border: transparent;

  --aila-badge-attive-bg:     var(--attive-surface);
  --aila-badge-attive-text:   var(--invert);
  --aila-badge-attive-border: transparent;

  /* ============================================================
     SIGN VARIANTS — soft surfaces paired with directional icon
     ============================================================ */
  --aila-badge-low-bg:            var(--neutral-opacity);
  --aila-badge-low-text:          var(--placeholder);
  --aila-badge-low-border:        transparent;

  --aila-badge-low-warning-bg:    var(--warning-opacity);
  --aila-badge-low-warning-text:  var(--warning-action);
  --aila-badge-low-warning-border: transparent;

  --aila-badge-over-bg:           var(--neutral-opacity);
  --aila-badge-over-text:         var(--placeholder);
  --aila-badge-over-border:       transparent;

  --aila-badge-over-danger-bg:    var(--danger-opacity);
  --aila-badge-over-danger-text:  var(--danger-action);
  --aila-badge-over-danger-border: transparent;

  --aila-badge-check-bg:          var(--success-opacity);
  --aila-badge-check-text:        var(--success-action);
  --aila-badge-check-border:      transparent;

  --aila-badge-great-bg:          var(--success-opacity);
  --aila-badge-great-text:        var(--success-action);
  --aila-badge-great-border:      transparent;

  --aila-badge-frequent-food-bg:     var(--neutral-opacity);
  --aila-badge-frequent-food-text:   var(--placeholder);
  --aila-badge-frequent-food-border: transparent;

  --aila-badge-processed-p-bg:     var(--processed-surface);
  --aila-badge-processed-p-text:   var(--invert);
  --aila-badge-processed-p-border: transparent;
}

/* ============================================================
   Badge element
   ------------------------------------------------------------
   Usage:
     <span class="badge" data-variant="primary" data-size="md">
       <i class="badge-icon" data-lucide="box"></i>
       <span>Label</span>
     </span>

   data-variant:
     neutral, primary, success, warning, danger,
     neutral-tonal, primary-tonal, success-tonal, warning-tonal, danger-tonal,
     neutral-outlined, primary-outlined, success-outlined, warning-outlined, danger-outlined,
     protein, fiber, carbo, fat, processed, wine, water, food, attive,
     low, low-warning, over, over-danger, check, great, frequent-food, processed-p

   data-size:  sm | md | lg
   data-shape: label (default) | icon | number | icon-only
   ============================================================ */

.badge {
  --_bg:       var(--aila-badge-neutral-bg);
  --_text:     var(--aila-badge-neutral-text);
  --_bd:       var(--aila-badge-neutral-border);

  /* Default size: md */
  --_height:      var(--aila-badge-md-height);
  --_pad-x:       var(--aila-badge-md-padding-x);
  --_pad-y:       var(--aila-badge-md-padding-y);
  --_pad-num-x:   var(--aila-badge-md-padding-number-x);
  --_pad-num-y:   var(--aila-badge-md-padding-number-y);
  --_pad-io-x:    var(--aila-badge-md-padding-x-icon-only);
  --_pad-io-y:    var(--aila-badge-md-padding-y-icon-only);
  --_radius:      var(--aila-badge-md-border-radius);
  --_gap:         var(--aila-badge-md-gap);
  --_icon-size:   var(--aila-badge-md-icon-size);
  --_icon-only-size: var(--aila-badge-md-icon-only-size);
  --_font-family: var(--aila-badge-md-font-family);
  --_font-size:   var(--aila-badge-md-font-size);
  --_font-weight: var(--aila-badge-md-font-weight);
  --_line-height: var(--aila-badge-md-line-height);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--_height);
  gap: var(--_gap);
  padding: var(--_pad-y) var(--_pad-x);
  border: var(--aila-badge-border-width) solid var(--_bd);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_text);
  font-family: var(--_font-family);
  font-size: var(--_font-size);
  font-weight: var(--_font-weight);
  line-height: var(--_line-height);
  white-space: nowrap;
  user-select: none;
  transition: var(--aila-badge-transition);
  vertical-align: middle;
}
.badge .badge-icon {
  width: var(--_icon-size);
  height: var(--_icon-size);
  color: currentColor;
  flex: 0 0 auto;
  stroke-width: 2;
}

/* Shape modifiers */
.badge[data-shape="number"] {
  padding: var(--_pad-num-y) var(--_pad-num-x);
  font-variant-numeric: tabular-nums;
  min-width: var(--_height);
}
.badge[data-shape="icon-only"] {
  width: var(--_height);
  padding: 0;
}
.badge[data-shape="icon-only"] .badge-icon {
  width: var(--_icon-only-size);
  height: var(--_icon-only-size);
}

/* Sizes */
.badge[data-size="sm"] {
  --_height:      var(--aila-badge-sm-height);
  --_pad-x:       var(--aila-badge-sm-padding-x);
  --_pad-y:       var(--aila-badge-sm-padding-y);
  --_pad-num-x:   var(--aila-badge-sm-padding-number-x);
  --_pad-num-y:   var(--aila-badge-sm-padding-number-y);
  --_pad-io-x:    var(--aila-badge-sm-padding-x-icon-only);
  --_pad-io-y:    var(--aila-badge-sm-padding-y-icon-only);
  --_radius:      var(--aila-badge-sm-border-radius);
  --_gap:         var(--aila-badge-sm-gap);
  --_icon-size:   var(--aila-badge-sm-icon-size);
  --_icon-only-size: var(--aila-badge-sm-icon-only-size);
  --_font-family: var(--aila-badge-sm-font-family);
  --_font-size:   var(--aila-badge-sm-font-size);
  --_font-weight: var(--aila-badge-sm-font-weight);
  --_line-height: var(--aila-badge-sm-line-height);
}
.badge[data-size="lg"] {
  --_height:      var(--aila-badge-lg-height);
  --_pad-x:       var(--aila-badge-lg-padding-x);
  --_pad-y:       var(--aila-badge-lg-padding-y);
  --_pad-num-x:   var(--aila-badge-lg-padding-number-x);
  --_pad-num-y:   var(--aila-badge-lg-padding-number-y);
  --_pad-io-x:    var(--aila-badge-lg-padding-x-icon-only);
  --_pad-io-y:    var(--aila-badge-lg-padding-y-icon-only);
  --_radius:      var(--aila-badge-lg-border-radius);
  --_gap:         var(--aila-badge-lg-gap);
  --_icon-size:   var(--aila-badge-lg-icon-size);
  --_icon-only-size: var(--aila-badge-lg-icon-only-size);
  --_font-family: var(--aila-badge-lg-font-family);
  --_font-size:   var(--aila-badge-lg-font-size);
  --_font-weight: var(--aila-badge-lg-font-weight);
  --_line-height: var(--aila-badge-lg-line-height);
}

/* ============================================================
   Variant bindings
   ============================================================ */
.badge[data-variant="neutral"] {
  --_bg:   var(--aila-badge-neutral-bg);
  --_text: var(--aila-badge-neutral-text);
  --_bd:   var(--aila-badge-neutral-border);
}
.badge[data-variant="primary"] {
  --_bg:   var(--aila-badge-primary-bg);
  --_text: var(--aila-badge-primary-text);
  --_bd:   var(--aila-badge-primary-border);
}
.badge[data-variant="success"] {
  --_bg:   var(--aila-badge-success-bg);
  --_text: var(--aila-badge-success-text);
  --_bd:   var(--aila-badge-success-border);
}
.badge[data-variant="warning"] {
  --_bg:   var(--aila-badge-warning-bg);
  --_text: var(--aila-badge-warning-text);
  --_bd:   var(--aila-badge-warning-border);
}
.badge[data-variant="danger"] {
  --_bg:   var(--aila-badge-danger-bg);
  --_text: var(--aila-badge-danger-text);
  --_bd:   var(--aila-badge-danger-border);
}
.badge[data-variant="neutral-tonal"] {
  --_bg:   var(--aila-badge-neutral-tonal-bg);
  --_text: var(--aila-badge-neutral-tonal-text);
  --_bd:   var(--aila-badge-neutral-tonal-border);
}
.badge[data-variant="primary-tonal"] {
  --_bg:   var(--aila-badge-primary-tonal-bg);
  --_text: var(--aila-badge-primary-tonal-text);
  --_bd:   var(--aila-badge-primary-tonal-border);
}
.badge[data-variant="success-tonal"] {
  --_bg:   var(--aila-badge-success-tonal-bg);
  --_text: var(--aila-badge-success-tonal-text);
  --_bd:   var(--aila-badge-success-tonal-border);
}
.badge[data-variant="warning-tonal"] {
  --_bg:   var(--aila-badge-warning-tonal-bg);
  --_text: var(--aila-badge-warning-tonal-text);
  --_bd:   var(--aila-badge-warning-tonal-border);
}
.badge[data-variant="danger-tonal"] {
  --_bg:   var(--aila-badge-danger-tonal-bg);
  --_text: var(--aila-badge-danger-tonal-text);
  --_bd:   var(--aila-badge-danger-tonal-border);
}
.badge[data-variant="neutral-outlined"] {
  --_bg:   var(--aila-badge-neutral-outlined-bg);
  --_text: var(--aila-badge-neutral-outlined-text);
  --_bd:   var(--aila-badge-neutral-outlined-border);
}
.badge[data-variant="primary-outlined"] {
  --_bg:   var(--aila-badge-primary-outlined-bg);
  --_text: var(--aila-badge-primary-outlined-text);
  --_bd:   var(--aila-badge-primary-outlined-border);
}
.badge[data-variant="success-outlined"] {
  --_bg:   var(--aila-badge-success-outlined-bg);
  --_text: var(--aila-badge-success-outlined-text);
  --_bd:   var(--aila-badge-success-outlined-border);
}
.badge[data-variant="warning-outlined"] {
  --_bg:   var(--aila-badge-warning-outlined-bg);
  --_text: var(--aila-badge-warning-outlined-text);
  --_bd:   var(--aila-badge-warning-outlined-border);
}
.badge[data-variant="danger-outlined"] {
  --_bg:   var(--aila-badge-danger-outlined-bg);
  --_text: var(--aila-badge-danger-outlined-text);
  --_bd:   var(--aila-badge-danger-outlined-border);
}
.badge[data-variant="protein"] {
  --_bg:   var(--aila-badge-protein-bg);
  --_text: var(--aila-badge-protein-text);
  --_bd:   var(--aila-badge-protein-border);
}
.badge[data-variant="fiber"] {
  --_bg:   var(--aila-badge-fiber-bg);
  --_text: var(--aila-badge-fiber-text);
  --_bd:   var(--aila-badge-fiber-border);
}
.badge[data-variant="carbo"] {
  --_bg:   var(--aila-badge-carbo-bg);
  --_text: var(--aila-badge-carbo-text);
  --_bd:   var(--aila-badge-carbo-border);
}
.badge[data-variant="fat"] {
  --_bg:   var(--aila-badge-fat-bg);
  --_text: var(--aila-badge-fat-text);
  --_bd:   var(--aila-badge-fat-border);
}
.badge[data-variant="processed"] {
  --_bg:   var(--aila-badge-processed-bg);
  --_text: var(--aila-badge-processed-text);
  --_bd:   var(--aila-badge-processed-border);
}
.badge[data-variant="wine"] {
  --_bg:   var(--aila-badge-wine-bg);
  --_text: var(--aila-badge-wine-text);
  --_bd:   var(--aila-badge-wine-border);
}
.badge[data-variant="water"] {
  --_bg:   var(--aila-badge-water-bg);
  --_text: var(--aila-badge-water-text);
  --_bd:   var(--aila-badge-water-border);
}
.badge[data-variant="food"] {
  --_bg:   var(--aila-badge-food-bg);
  --_text: var(--aila-badge-food-text);
  --_bd:   var(--aila-badge-food-border);
}
.badge[data-variant="attive"] {
  --_bg:   var(--aila-badge-attive-bg);
  --_text: var(--aila-badge-attive-text);
  --_bd:   var(--aila-badge-attive-border);
}
.badge[data-variant="low"] {
  --_bg:   var(--aila-badge-low-bg);
  --_text: var(--aila-badge-low-text);
  --_bd:   var(--aila-badge-low-border);
}
.badge[data-variant="low-warning"] {
  --_bg:   var(--aila-badge-low-warning-bg);
  --_text: var(--aila-badge-low-warning-text);
  --_bd:   var(--aila-badge-low-warning-border);
}
.badge[data-variant="over"] {
  --_bg:   var(--aila-badge-over-bg);
  --_text: var(--aila-badge-over-text);
  --_bd:   var(--aila-badge-over-border);
}
.badge[data-variant="over-danger"] {
  --_bg:   var(--aila-badge-over-danger-bg);
  --_text: var(--aila-badge-over-danger-text);
  --_bd:   var(--aila-badge-over-danger-border);
}
.badge[data-variant="check"] {
  --_bg:   var(--aila-badge-check-bg);
  --_text: var(--aila-badge-check-text);
  --_bd:   var(--aila-badge-check-border);
}
.badge[data-variant="great"] {
  --_bg:   var(--aila-badge-great-bg);
  --_text: var(--aila-badge-great-text);
  --_bd:   var(--aila-badge-great-border);
}
.badge[data-variant="frequent-food"] {
  --_bg:   var(--aila-badge-frequent-food-bg);
  --_text: var(--aila-badge-frequent-food-text);
  --_bd:   var(--aila-badge-frequent-food-border);
}
.badge[data-variant="processed-p"] {
  --_bg:   var(--aila-badge-processed-p-bg);
  --_text: var(--aila-badge-processed-p-text);
  --_bd:   var(--aila-badge-processed-p-border);
}

/* ============================================================
   BADGE · DOT
   ------------------------------------------------------------
   A tiny filled circle — useful for list markers, activity
   signals, chip prefixes, or inline legend dots. Takes the
   variant's base surface color. No text / icon / padding.

   Usage:
     <span class="badge-dot" data-variant="primary" data-size="sm"></span>

   data-size:    xs (4px) · sm (6px, default) · md (8px)
   data-variant: neutral | primary | success | warning | danger |
                 protein | fiber | carbo | fat | processed |
                 wine | water | food | attive
   ============================================================ */

:root {
  --aila-badge-dot-xs: 0.25rem;  /* 4px */
  --aila-badge-dot-sm: 0.375rem; /* 6px */
  --aila-badge-dot-md: 0.5rem;   /* 8px */

  --aila-badge-dot-neutral-bg: var(--neutral-surface);
  --aila-badge-dot-primary-bg: var(--primary-surface);
  --aila-badge-dot-success-bg: var(--success-surface);
  --aila-badge-dot-warning-bg: var(--warning-surface);
  --aila-badge-dot-danger-bg: var(--danger-surface);
  --aila-badge-dot-protein-bg: var(--protein-surface);
  --aila-badge-dot-fiber-bg: var(--fiber-surface);
  --aila-badge-dot-carbo-bg: var(--carbo-surface);
  --aila-badge-dot-fat-bg: var(--fat-surface);
  --aila-badge-dot-processed-bg: var(--processed-surface);
  --aila-badge-dot-wine-bg: var(--wine-surface);
  --aila-badge-dot-water-bg: var(--water-surface);
  --aila-badge-dot-food-bg: var(--kcal-surface);
  --aila-badge-dot-attive-bg: var(--attive-surface);
}

.badge-dot {
  --_dot-size: var(--aila-badge-dot-sm);
  --_dot-bg:   var(--aila-badge-dot-neutral-bg);

  display: inline-block;
  width: var(--_dot-size);
  height: var(--_dot-size);
  border-radius: var(--rounded-full);
  background: var(--_dot-bg);
  vertical-align: middle;
  flex: 0 0 auto;
}

.badge-dot[data-size="xs"] { --_dot-size: var(--aila-badge-dot-xs); }
.badge-dot[data-size="sm"] { --_dot-size: var(--aila-badge-dot-sm); }
.badge-dot[data-size="md"] { --_dot-size: var(--aila-badge-dot-md); }

.badge-dot[data-variant="neutral"] { --_dot-bg: var(--aila-badge-dot-neutral-bg); }
.badge-dot[data-variant="primary"] { --_dot-bg: var(--aila-badge-dot-primary-bg); }
.badge-dot[data-variant="success"] { --_dot-bg: var(--aila-badge-dot-success-bg); }
.badge-dot[data-variant="warning"] { --_dot-bg: var(--aila-badge-dot-warning-bg); }
.badge-dot[data-variant="danger"] { --_dot-bg: var(--aila-badge-dot-danger-bg); }
.badge-dot[data-variant="protein"] { --_dot-bg: var(--aila-badge-dot-protein-bg); }
.badge-dot[data-variant="fiber"] { --_dot-bg: var(--aila-badge-dot-fiber-bg); }
.badge-dot[data-variant="carbo"] { --_dot-bg: var(--aila-badge-dot-carbo-bg); }
.badge-dot[data-variant="fat"] { --_dot-bg: var(--aila-badge-dot-fat-bg); }
.badge-dot[data-variant="processed"] { --_dot-bg: var(--aila-badge-dot-processed-bg); }
.badge-dot[data-variant="wine"] { --_dot-bg: var(--aila-badge-dot-wine-bg); }
.badge-dot[data-variant="water"] { --_dot-bg: var(--aila-badge-dot-water-bg); }
.badge-dot[data-variant="food"] { --_dot-bg: var(--aila-badge-dot-food-bg); }
.badge-dot[data-variant="attive"] { --_dot-bg: var(--aila-badge-dot-attive-bg); }