/* ============================================================
   CHIP — Figma 68:5040
   ------------------------------------------------------------
       <span class="ice-chip" data-size="m">Techno</span>
       <span class="ice-chip" data-style="filled" data-hue="peach">…</span>
       <span class="ice-chip" data-style="outlined" data-category="techno">…</span>

   Five sizes, three styles, five hues. A category is the same
   thing under an app name — the mapping lives in the selectors
   below, so a category never needs its own rule.

     default   elevation 3 glass, ink label
     filled    the hue as a gradient, white label
     outlined  pale glass, the hue only as stroke and glow

   THE GLOW IS A CORNER, NOT A WASH. Each one is an ellipse whose
   radii are exactly half the chip, centred on the corner, so it
   has faded out by the middle. Drawn any wider it floods the chip
   and the two-colour base disappears under it.

   Outlined is NOT filled with a paler base: it has its own pair of
   glow colours and its own opacities.

   Every value is written straight onto the property. There is no
   --_a / --_b carrier: each rule reads like its Figma panel.
   ============================================================ */

.ice-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;

  /* Default = m. */
  block-size: var(--height-s);
  padding-inline: var(--space-12);
  gap: var(--space-8);
  border-radius: var(--radius-6);

  font-family: var(--font-title);
  font-size: var(--type-caps-m-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-caps-m-leading);
  letter-spacing: var(--type-caps-m-track);
  text-transform: uppercase;

  color: var(--chip-fg);
  opacity: .8;

  border: var(--border-w) solid;
  border-color: var(--chip-border-lit) var(--chip-border-lit)
                var(--chip-border)     var(--chip-border);
  background-image: linear-gradient(var(--glass-dir), var(--chip-fill-from), var(--chip-fill-to));
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(var(--shadow-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-s-blur));

  /* So a chip inside a card fades between its hue and the default
     at the same speed as everything else on that card. */
  transition: background-image var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.ice-chip > .ice-icon { inline-size: var(--icon-s); block-size: var(--icon-s); flex-shrink: 0; }

/* --- Sizes --------------------------------------------------
   The label is Caps M at every size — only the box moves.      */
.ice-chip[data-size="xs"] {
  block-size: var(--height-2xs); padding-inline: var(--space-10);
  gap: var(--space-6); border-radius: var(--radius-6);
}
.ice-chip[data-size="s"] {
  block-size: var(--height-xs); padding-inline: var(--space-10);
  gap: var(--space-6); border-radius: var(--radius-6);
}
.ice-chip[data-size="m"] {
  block-size: var(--height-s); padding-inline: var(--space-12);
  gap: var(--space-8); border-radius: var(--radius-6);
}
.ice-chip[data-size="l"] {
  block-size: var(--height-m); padding-inline: var(--space-16);
  gap: var(--space-10); border-radius: var(--radius-9);
}
.ice-chip[data-size="xl"] {
  block-size: var(--height-l); padding-inline: var(--space-20);
  gap: var(--space-12); border-radius: var(--radius-12);
  font-size: var(--type-caps-l-size);
  line-height: var(--type-caps-l-leading);
  letter-spacing: var(--type-caps-l-track);
}
.ice-chip[data-size="xs"] > .ice-icon,
.ice-chip[data-size="s"]  > .ice-icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); }
.ice-chip[data-size="xl"] > .ice-icon { inline-size: var(--icon-m);  block-size: var(--icon-m); }

.ice-chip[data-icon-only] { aspect-ratio: 1; padding-inline: 0; gap: 0; }

/* --- Filled -------------------------------------------------
   The hue as a gradient, two corner glows at 50%, a white label
   over a shadow of the hue's own ink, and a linear stroke at 20%
   running dark → pale. Figma 68:5040.                          */
.ice-chip[data-style="filled"][data-hue],
.ice-chip[data-style="filled"][data-category] {
  color: var(--white);
  opacity: 1;
}

.ice-chip[data-style="filled"][data-hue="peach"],
.ice-chip[data-style="filled"][data-category="concurrence"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--ice-peach-200) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--ice-yellow-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--ice-peach-600), var(--ice-yellow-200));
  border-color: color-mix(in srgb, var(--ice-yellow-50) 20%, transparent)
                color-mix(in srgb, var(--ice-yellow-50) 20%, transparent)
                color-mix(in srgb, var(--ice-peach-600) 20%, transparent)
                color-mix(in srgb, var(--ice-peach-600) 20%, transparent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ice-peach-700) 40%, transparent);
}

.ice-chip[data-style="filled"][data-hue="lavande"],
.ice-chip[data-style="filled"][data-category="techno"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vivid-fuchsia-300) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--ice-yellow-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--ice-lavender-600), var(--vivid-turquoise-100));
  border-color: color-mix(in srgb, var(--vivid-turquoise-50) 20%, transparent)
                color-mix(in srgb, var(--vivid-turquoise-50) 20%, transparent)
                color-mix(in srgb, var(--ice-lavender-600) 20%, transparent)
                color-mix(in srgb, var(--ice-lavender-600) 20%, transparent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ice-lavender-700) 30%, transparent);
}

.ice-chip[data-style="filled"][data-hue="nature"],
.ice-chip[data-style="filled"][data-category="ecosysteme"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--ice-green-300) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--ice-yellow-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--ice-turquoise-500), var(--vivid-green-50));
  border-color: color-mix(in srgb, var(--vivid-green-50) 20%, transparent)
                color-mix(in srgb, var(--vivid-green-50) 20%, transparent)
                color-mix(in srgb, var(--ice-turquoise-500) 20%, transparent)
                color-mix(in srgb, var(--ice-turquoise-500) 20%, transparent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ice-turquoise-600) 30%, transparent);
}

.ice-chip[data-style="filled"][data-hue="sunset"],
.ice-chip[data-style="filled"][data-category="marche"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vivid-fuchsia-300) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--ice-yellow-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--ice-fuchsia-700), var(--ice-peach-200));
  border-color: color-mix(in srgb, var(--ice-yellow-50) 20%, transparent)
                color-mix(in srgb, var(--ice-yellow-50) 20%, transparent)
                color-mix(in srgb, var(--ice-fuchsia-700) 20%, transparent)
                color-mix(in srgb, var(--ice-fuchsia-700) 20%, transparent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ice-fuchsia-700) 30%, transparent);
}

.ice-chip[data-style="filled"][data-hue="neutral"],
.ice-chip[data-style="filled"][data-category="signal"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vivid-blue-100) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--vivid-turquoise-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--ice-blue-400), var(--ice-blue-200));
  border-color: color-mix(in srgb, var(--ice-blue-50) 20%, transparent)
                color-mix(in srgb, var(--ice-blue-50) 20%, transparent)
                color-mix(in srgb, var(--ice-blue-400) 20%, transparent)
                color-mix(in srgb, var(--ice-blue-400) 20%, transparent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ice-blue-700) 30%, transparent);
}

/* --- Outlined -----------------------------------------------
   White glass, the hue only as stroke and glow. Nature sits at
   25%, neutral's top-right at 30%; the rest at 50%.

   ITS STROKE IS A REAL GRADIENT. CSS cannot put a gradient on
   `border-color`, so the ring is painted as a background layer
   clipped to the border box, with the fill layers clipped to the
   padding box on top of it. That only works because the fill is
   opaque — which is why Figma switched it to white 100% → 95%.

   The ring runs from the hue's dark end at the shaded corner to a
   light one at the lit corner — its own pair, not the fill's. */
.ice-chip[data-style="outlined"][data-hue],
.ice-chip[data-style="outlined"][data-category] {
  border-color: transparent;
  background-origin: border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
}
.ice-chip[data-style="outlined"][data-hue="peach"],
.ice-chip[data-style="outlined"][data-category="concurrence"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--ice-peach-200) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--ice-yellow-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--chip-outline-from), var(--chip-outline-to)),
    linear-gradient(var(--glass-dir), var(--ice-peach-600), var(--ice-yellow-200));
}
.ice-chip[data-style="outlined"][data-hue="lavande"],
.ice-chip[data-style="outlined"][data-category="techno"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vivid-fuchsia-200) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--vivid-turquoise-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--chip-outline-from), var(--chip-outline-to)),
    linear-gradient(var(--glass-dir), var(--ice-lavender-600), var(--vivid-turquoise-100));
}
.ice-chip[data-style="outlined"][data-hue="nature"],
.ice-chip[data-style="outlined"][data-category="ecosysteme"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--ice-turquoise-200) 25%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--vivid-green-50) 25%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--chip-outline-from), var(--chip-outline-to)),
    linear-gradient(var(--glass-dir), var(--ice-turquoise-500), var(--vivid-green-100));
}
.ice-chip[data-style="outlined"][data-hue="sunset"],
.ice-chip[data-style="outlined"][data-category="marche"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vivid-fuchsia-200) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--ice-yellow-50) 50%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--chip-outline-from), var(--chip-outline-to)),
    linear-gradient(var(--glass-dir), var(--ice-fuchsia-700), var(--ice-peach-300));
}
.ice-chip[data-style="outlined"][data-hue="neutral"],
.ice-chip[data-style="outlined"][data-category="signal"] {
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vivid-blue-100) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--vivid-turquoise-50) 30%, transparent), transparent),
    linear-gradient(var(--glass-dir), var(--chip-outline-from), var(--chip-outline-to)),
    linear-gradient(var(--glass-dir), var(--ice-blue-400), var(--vivid-blue-200));
}