/*
 * Maps the brand utility classes onto the variables in theme.css.
 * Edit theme.css, not this file.
 *
 * tailwind.min.css bakes the brand colour in as a literal rgb() at bundle time;
 * these rules redefine every brand class it contains (same selectors, loaded
 * later, so they win). If you use a new brand/<opacity> class, add it here.
 */

.bg-brand, .hover\:bg-brand:hover { background-color: var(--brand); }
.bg-brand\/10                     { background-color: color-mix(in srgb, var(--brand) 10%, transparent); }
.bg-brand\/\[\.04\],
.hover\:bg-brand\/\[\.04\]:hover  { background-color: color-mix(in srgb, var(--brand) 4%, transparent); }

.text-brand                       { color: var(--brand); }
.text-brand\/25                   { color: color-mix(in srgb, var(--brand) 25%, transparent); }
.text-brand\/30                   { color: color-mix(in srgb, var(--brand) 30%, transparent); }
.text-brand\/40                   { color: color-mix(in srgb, var(--brand) 40%, transparent); }
.text-brand\/50                   { color: color-mix(in srgb, var(--brand) 50%, transparent); }
.text-brand\/60,
.hover\:text-brand\/60:hover      { color: color-mix(in srgb, var(--brand) 60%, transparent); }

.border-brand\/10                 { border-color: color-mix(in srgb, var(--brand) 10%, transparent); }
.border-brand\/20                 { border-color: color-mix(in srgb, var(--brand) 20%, transparent); }
.border-brand\/25                 { border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.focus\:border-brand\/40:focus    { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.hover\:border-brand\/50:hover    { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }

.placeholder-brand\/25::placeholder { color: color-mix(in srgb, var(--brand) 25%, transparent); }

.ring-brand\/10                   { --tw-ring-color: color-mix(in srgb, var(--brand) 10%, transparent); }
.focus\:ring-brand\/20:focus      { --tw-ring-color: color-mix(in srgb, var(--brand) 20%, transparent); }

.accent-brand                     { accent-color: var(--brand); }

.bg-header                        { background-color: var(--header-bg); }
.text-header                      { color: var(--header-text); }
.bg-page                          { background-color: var(--page-bg); }

/* Drag-over visual for the upload dropzone */
.dropzone-active {
    border-color: var(--brand) !important;
    background-color: color-mix(in srgb, var(--brand) 6%, transparent);
}