/* Colours the Tailwind v2 CDN build does not ship.
 *
 * The panel loads tailwindcss@2.2.19 from a CDN, which carries only the default
 * v2 palette: red, yellow, green, blue, indigo, purple, pink, gray. Measured in
 * a browser against the real stylesheet, not assumed. Every other family -
 * orange, cyan, teal, rose, and also slate/amber/lime/sky/violet/fuchsia/zinc/
 * neutral/stone - produces no rule at all, so the class silently does nothing
 * and the element renders unstyled.
 *
 * emerald is not here on purpose: v2's "green" ramp is byte-for-byte v3's
 * "emerald" ramp (green-500 = #10b981 = emerald-500, and the same through 300
 * to 900), so those usages were renamed to green rather than shimmed.
 *
 * Only the classes actually in use are defined. A wider palette would be mostly
 * dead weight, and PaletteTest fails the build if a view starts using a colour
 * that neither Tailwind nor this file provides - which is what stops the silent
 * failure from coming back.
 *
 * The opacity variables are read with a fallback - var(--tw-bg-opacity, 1) -
 * rather than assigned. The codebase pairs these classes with bg-opacity-*,
 * ring-opacity-* and text-opacity-*, which work by setting those variables.
 * Tailwind's own colour rules assign `--tw-bg-opacity: 1` and get away with it
 * because they are emitted before the opacity utilities; this file is loaded
 * after, so assigning would win the cascade and force every badge fully opaque.
 * Measured: with the assignment, bg-orange-500 + bg-opacity-20 rendered as solid
 * rgb(249, 115, 22).
 */

/* --- orange ------------------------------------------------------------- */
/* bg-orange-500 is built at runtime in profile/show.blade.php as
   bg-{{ $milestone['colour'] }}-500, so it never appears literally in a view. */
.bg-orange-500 {
    background-color: rgba(249, 115, 22, var(--tw-bg-opacity, 1));
}

.text-orange-300 {
    color: rgba(253, 186, 116, var(--tw-text-opacity, 1));
}

.text-orange-400 {
    color: rgba(251, 146, 60, var(--tw-text-opacity, 1));
}

.text-orange-500 {
    color: rgba(249, 115, 22, var(--tw-text-opacity, 1));
}

.ring-orange-500 {
    --tw-ring-color: rgba(249, 115, 22, var(--tw-ring-opacity, 1));
}

.from-orange-500 {
    --tw-gradient-from: #f97316;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
}

.to-orange-500 {
    --tw-gradient-to: #f97316;
}

.to-orange-600 {
    --tw-gradient-to: #ea580c;
}

/* --- cyan --------------------------------------------------------------- */
.text-cyan-500 {
    color: rgba(6, 182, 212, var(--tw-text-opacity, 1));
}

.from-cyan-500 {
    --tw-gradient-from: #06b6d4;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0));
}

/* --- teal --------------------------------------------------------------- */
.to-teal-500 {
    --tw-gradient-to: #14b8a6;
}

.to-teal-600 {
    --tw-gradient-to: #0d9488;
}

/* --- rose --------------------------------------------------------------- */
.to-rose-600 {
    --tw-gradient-to: #e11d48;
}