/**
 * Utilidades custom de Prometeo Design System
 * 
 * ⚠️  ARCHIVO GENERADO AUTOMÁTICAMENTE - NO EDITAR MANUALMENTE
 * 
 * Este archivo es generado desde src/styles/app.css por el script:
 *   npm run migrate:utilities
 * 
 * Para agregar/modificar utilidades:
 *   1. Edita src/styles/app.css usando @utility
 *   2. Ejecuta: npm run migrate:utilities
 *   3. Las utilidades estarán disponibles en ambos:
 *      - Desarrollo local (intellisense con @utility)
 *      - Clientes de la librería (@layer utilities)
 */

@layer utilities {

    .bg-neutral-default-default {
        background-color: var(--bg-neutral-default-default);
    }

    .bg-neutral-default-hover {
        background-color: var(--bg-neutral-default-hover);
    }

    .bg-neutral-default-pressed {
        background-color: var(--bg-neutral-default-pressed);
    }

    .bg-neutral-primary-default {
        background-color: var(--bg-neutral-primary-default);
    }

    .bg-neutral-primary-hover {
        background-color: var(--bg-neutral-primary-hover);
    }

    .bg-neutral-primary-pressed {
        background-color: var(--bg-neutral-primary-pressed);
    }

    .bg-neutral-secondary-default {
        background-color: var(--bg-neutral-secondary-default);
    }

    .bg-neutral-secondary-hover {
        background-color: var(--bg-neutral-secondary-hover);
    }

    .bg-neutral-secondary-pressed {
        background-color: var(--bg-neutral-secondary-pressed);
    }

    .bg-neutral-tertiary-default {
        background-color: var(--bg-neutral-tertiary-default);
    }

    .bg-neutral-tertiary-hover {
        background-color: var(--bg-neutral-tertiary-hover);
    }

    .bg-neutral-tertiary-pressed {
        background-color: var(--bg-neutral-tertiary-pressed);
    }

    .bg-brand-primary-default {
        background-color: var(--bg-brand-primary-default);
    }

    .bg-brand-primary-hover {
        background-color: var(--bg-brand-primary-hover);
    }

    .bg-brand-primary-pressed {
        background-color: var(--bg-brand-primary-pressed);
    }

    .bg-brand-secondary-default {
        background-color: var(--bg-brand-secondary-default);
    }

    .bg-brand-secondary-hover {
        background-color: var(--bg-brand-secondary-hover);
    }

    .bg-brand-secondary-pressed {
        background-color: var(--bg-brand-secondary-pressed);
    }

    .bg-brand-overlay-default {
        background-color: var(--bg-brand-overlay-default);
    }

    .bg-brand-overlay-hover {
        background-color: var(--bg-brand-overlay-hover);
    }

    .bg-brand-overlay-pressed {
        background-color: var(--bg-brand-overlay-pressed);
    }

    .bg-success-primary-default {
        background-color: var(--bg-success-primary-default);
    }

    .bg-success-primary-hover {
        background-color: var(--bg-success-primary-hover);
    }

    .bg-success-primary-pressed {
        background-color: var(--bg-success-primary-pressed);
    }

    .bg-success-secondary-default {
        background-color: var(--bg-success-secondary-default);
    }

    .bg-success-secondary-hover {
        background-color: var(--bg-success-secondary-hover);
    }

    .bg-success-secondary-pressed {
        background-color: var(--bg-success-secondary-pressed);
    }

    .bg-success-overlay-default {
        background-color: var(--bg-success-overlay-default);
    }

    .bg-success-overlay-hover {
        background-color: var(--bg-success-overlay-hover);
    }

    .bg-success-overlay-pressed {
        background-color: var(--bg-success-overlay-pressed);
    }

    .bg-error-primary-default {
        background-color: var(--bg-error-primary-default);
    }

    .bg-error-primary-hover {
        background-color: var(--bg-error-primary-hover);
    }

    .bg-error-primary-pressed {
        background-color: var(--bg-error-primary-pressed);
    }

    .bg-error-secondary-default {
        background-color: var(--bg-error-secondary-default);
    }

    .bg-error-secondary-hover {
        background-color: var(--bg-error-secondary-hover);
    }

    .bg-error-secondary-pressed {
        background-color: var(--bg-error-secondary-pressed);
    }

    .bg-error-overlay-default {
        background-color: var(--bg-error-overlay-default);
    }

    .bg-error-overlay-hover {
        background-color: var(--bg-error-overlay-hover);
    }

    .bg-error-overlay-pressed {
        background-color: var(--bg-error-overlay-pressed);
    }

    .bg-warning-primary-default {
        background-color: var(--bg-warning-primary-default);
    }

    .bg-warning-primary-hover {
        background-color: var(--bg-warning-primary-hover);
    }

    .bg-warning-primary-pressed {
        background-color: var(--bg-warning-primary-pressed);
    }

    .bg-warning-secondary-default {
        background-color: var(--bg-warning-secondary-default);
    }

    .bg-warning-secondary-hover {
        background-color: var(--bg-warning-secondary-hover);
    }

    .bg-warning-secondary-pressed {
        background-color: var(--bg-warning-secondary-pressed);
    }

    .bg-warning-overlay-default {
        background-color: var(--bg-warning-overlay-default);
    }

    .bg-warning-overlay-hover {
        background-color: var(--bg-warning-overlay-hover);
    }

    .bg-warning-overlay-pressed {
        background-color: var(--bg-warning-overlay-pressed);
    }

    .bg-pending-primary-default {
        background-color: var(--bg-pending-primary-default);
    }

    .bg-pending-secondary-default {
        background-color: var(--bg-pending-secondary-default);
    }

    .bg-inprogress-primary-default {
        background-color: var(--bg-inprogress-primary-default);
    }

    .bg-inprogress-secondary-default {
        background-color: var(--bg-inprogress-secondary-default);
    }

    .bg-disabled-default {
        background-color: var(--bg-disabled-default);
    }

    .bg-category-priority-high-primary {
        background-color: var(--bg-category-priority-high-primary);
    }

    .bg-category-priority-high-secondary {
        background-color: var(--bg-category-priority-high-secondary);
    }

    .bg-category-priority-medium-primary {
        background-color: var(--bg-category-priority-medium-primary);
    }

    .bg-category-priority-medium-secondary {
        background-color: var(--bg-category-priority-medium-secondary);
    }

    .bg-category-priority-low-primary {
        background-color: var(--bg-category-priority-low-primary);
    }

    .bg-category-priority-low-secondary {
        background-color: var(--bg-category-priority-low-secondary);
    }

    .bg-category-status-pending-primary {
        background-color: var(--bg-category-status-pending-primary);
    }

    .bg-category-status-pending-secondary {
        background-color: var(--bg-category-status-pending-secondary);
    }

    .bg-category-status-onhold-primary {
        background-color: var(--bg-category-status-onhold-primary);
    }

    .bg-category-status-onhold-secondary {
        background-color: var(--bg-category-status-onhold-secondary);
    }

    .bg-category-status-inprogress-primary {
        background-color: var(--bg-category-status-inprogress-primary);
    }

    .bg-category-status-inprogress-secondary {
        background-color: var(--bg-category-status-inprogress-secondary);
    }

    .bg-category-status-discard-primary {
        background-color: var(--bg-category-status-discard-primary);
    }

    .bg-category-status-discard-secondary {
        background-color: var(--bg-category-status-discard-secondary);
    }

    .bg-category-status-done-primary {
        background-color: var(--bg-category-status-done-primary);
    }

    .bg-category-status-done-secondary {
        background-color: var(--bg-category-status-done-secondary);
    }

    .bg-category-label-violet {
        background-color: var(--bg-category-label-violet);
    }

    .bg-category-label-lilac {
        background-color: var(--bg-category-label-lilac);
    }

    .bg-category-label-tangerine {
        background-color: var(--bg-category-label-tangerine);
    }

    .bg-category-label-orange {
        background-color: var(--bg-category-label-orange);
    }

    .bg-category-label-red {
        background-color: var(--bg-category-label-red);
    }

    .bg-category-label-yellow {
        background-color: var(--bg-category-label-yellow);
    }

    .bg-category-label-green {
        background-color: var(--bg-category-label-green);
    }

    .bg-category-label-blue {
        background-color: var(--bg-category-label-blue);
    }

    .bg-category-label-lightblue {
        background-color: var(--bg-category-label-lightblue);
    }

    .bg-category-label-grey {
        background-color: var(--bg-category-label-grey);
    }

    .bg-richtext-highlight-violet {
        background-color: var(--bg-richtext-highlight-violet);
    }

    .bg-richtext-highlight-blue {
        background-color: var(--bg-richtext-highlight-blue);
    }

    .bg-richtext-highlight-green {
        background-color: var(--bg-richtext-highlight-green);
    }

    .bg-richtext-highlight-yellow {
        background-color: var(--bg-richtext-highlight-yellow);
    }

    .bg-richtext-highlight-orange {
        background-color: var(--bg-richtext-highlight-orange);
    }

    .bg-richtext-highlight-red {
        background-color: var(--bg-richtext-highlight-red);
    }

    .bg-dataviz-series-1 {
        background-color: var(--bg-dataviz-series-1);
    }

    .bg-dataviz-series-2 {
        background-color: var(--bg-dataviz-series-2);
    }

    .bg-dataviz-series-3 {
        background-color: var(--bg-dataviz-series-3);
    }

    .bg-dataviz-series-4 {
        background-color: var(--bg-dataviz-series-4);
    }

    .bg-dataviz-series-5 {
        background-color: var(--bg-dataviz-series-5);
    }

    .bg-dataviz-series-6 {
        background-color: var(--bg-dataviz-series-6);
    }

    .bg-dataviz-series-7 {
        background-color: var(--bg-dataviz-series-7);
    }

    .bg-dataviz-series-8 {
        background-color: var(--bg-dataviz-series-8);
    }

    .bg-dataviz-series-9 {
        background-color: var(--bg-dataviz-series-9);
    }

    .bg-dataviz-sequential-indigo-1 {
        background-color: var(--bg-dataviz-sequential-indigo-1);
    }

    .bg-dataviz-sequential-indigo-2 {
        background-color: var(--bg-dataviz-sequential-indigo-2);
    }

    .bg-dataviz-sequential-indigo-3 {
        background-color: var(--bg-dataviz-sequential-indigo-3);
    }

    .bg-dataviz-sequential-indigo-4 {
        background-color: var(--bg-dataviz-sequential-indigo-4);
    }

    .bg-dataviz-sequential-indigo-5 {
        background-color: var(--bg-dataviz-sequential-indigo-5);
    }

    .bg-dataviz-sequential-indigo-6 {
        background-color: var(--bg-dataviz-sequential-indigo-6);
    }

    .bg-dataviz-sequential-orange-1 {
        background-color: var(--bg-dataviz-sequential-orange-1);
    }

    .bg-dataviz-sequential-orange-2 {
        background-color: var(--bg-dataviz-sequential-orange-2);
    }

    .bg-dataviz-sequential-orange-3 {
        background-color: var(--bg-dataviz-sequential-orange-3);
    }

    .bg-dataviz-sequential-orange-4 {
        background-color: var(--bg-dataviz-sequential-orange-4);
    }

    .bg-dataviz-sequential-orange-5 {
        background-color: var(--bg-dataviz-sequential-orange-5);
    }

    .bg-dataviz-sequential-orange-6 {
        background-color: var(--bg-dataviz-sequential-orange-6);
    }

    .bg-dataviz-diverging-1 {
        background-color: var(--bg-dataviz-diverging-1);
    }

    .bg-dataviz-diverging-2 {
        background-color: var(--bg-dataviz-diverging-2);
    }

    .bg-dataviz-diverging-3 {
        background-color: var(--bg-dataviz-diverging-3);
    }

    .bg-dataviz-diverging-4 {
        background-color: var(--bg-dataviz-diverging-4);
    }

    .bg-dataviz-diverging-5 {
        background-color: var(--bg-dataviz-diverging-5);
    }

    .bg-dataviz-diverging-6 {
        background-color: var(--bg-dataviz-diverging-6);
    }

    .bg-dataviz-diverging-7 {
        background-color: var(--bg-dataviz-diverging-7);
    }

    .bg-dataviz-diverging-8 {
        background-color: var(--bg-dataviz-diverging-8);
    }

    .bg-dataviz-diverging-9 {
        background-color: var(--bg-dataviz-diverging-9);
    }

    .bg-neutral-weak-default {
        background-color: var(--bg-neutral-tertiary-default);
    }

    .bg-neutral-weak-hover {
        background-color: var(--bg-neutral-tertiary-hover);
    }

    .bg-neutral-weak-pressed {
        background-color: var(--bg-neutral-tertiary-pressed);
    }


    .text-neutral-default-default {
        color: var(--text-neutral-default-default);
    }

    .text-neutral-default-hover {
        color: var(--text-neutral-default-hover);
    }

    .text-neutral-default-pressed {
        color: var(--text-neutral-default-pressed);
    }

    .text-neutral-primary-default {
        color: var(--text-neutral-primary-default);
    }

    .text-neutral-primary-hover {
        color: var(--text-neutral-primary-hover);
    }

    .text-neutral-primary-pressed {
        color: var(--text-neutral-primary-pressed);
    }

    .text-neutral-secondary-default {
        color: var(--text-neutral-secondary-default);
    }

    .text-neutral-secondary-hover {
        color: var(--text-neutral-secondary-hover);
    }

    .text-neutral-secondary-pressed {
        color: var(--text-neutral-secondary-pressed);
    }

    .text-neutral-tertiary-default {
        color: var(--text-neutral-tertiary-default);
    }

    .text-neutral-tertiary-hover {
        color: var(--text-neutral-tertiary-hover);
    }

    .text-neutral-tertiary-pressed {
        color: var(--text-neutral-tertiary-pressed);
    }

    .text-neutral-onbrandprimary-default {
        color: var(--text-neutral-onbrandprimary-default);
    }

    .text-neutral-onbrandprimary-hover {
        color: var(--text-neutral-onbrandprimary-hover);
    }

    .text-neutral-onbrandprimary-pressed {
        color: var(--text-neutral-onbrandprimary-pressed);
    }

    .text-neutral-onbrandsecondary-default {
        color: var(--text-neutral-onbrandsecondary-default);
    }

    .text-neutral-onbrandsecondary-hover {
        color: var(--text-neutral-onbrandsecondary-hover);
    }

    .text-neutral-onbrandsecondary-pressed {
        color: var(--text-neutral-onbrandsecondary-pressed);
    }

    .text-neutral-onoverlay-default {
        color: var(--text-neutral-onoverlay-default);
    }

    .text-neutral-onoverlay-hover {
        color: var(--text-neutral-onoverlay-hover);
    }

    .text-neutral-onoverlay-pressed {
        color: var(--text-neutral-onoverlay-pressed);
    }

    .text-neutral-onsemantic-default {
        color: var(--text-neutral-onsemantic-default);
    }

    .text-neutral-onsemantic-hover {
        color: var(--text-neutral-onsemantic-hover);
    }

    .text-neutral-onsemantic-pressed {
        color: var(--text-neutral-onsemantic-pressed);
    }

    .text-brand-primary-default {
        color: var(--text-brand-primary-default);
    }

    .text-brand-primary-hover {
        color: var(--text-brand-primary-hover);
    }

    .text-brand-primary-pressed {
        color: var(--text-brand-primary-pressed);
    }

    .text-brand-secondary-default {
        color: var(--text-brand-secondary-default);
    }

    .text-brand-secondary-hover {
        color: var(--text-brand-secondary-hover);
    }

    .text-brand-secondary-pressed {
        color: var(--text-brand-secondary-pressed);
    }

    .text-brand-overlay-default {
        color: var(--text-brand-overlay-default);
    }

    .text-brand-overlay-hover {
        color: var(--text-brand-overlay-hover);
    }

    .text-brand-overlay-pressed {
        color: var(--text-brand-overlay-pressed);
    }

    .text-brand-onneutral-default {
        color: var(--text-brand-onneutral-default);
    }

    .text-brand-onneutral-hover {
        color: var(--text-brand-onneutral-hover);
    }

    .text-brand-onneutral-pressed {
        color: var(--text-brand-onneutral-pressed);
    }

    .text-semantic-success-primary-default {
        color: var(--text-semantic-success-primary-default);
    }

    .text-semantic-success-primary-hover {
        color: var(--text-semantic-success-primary-hover);
    }

    .text-semantic-success-primary-pressed {
        color: var(--text-semantic-success-primary-pressed);
    }

    .text-semantic-success-secondary-default {
        color: var(--text-semantic-success-secondary-default);
    }

    .text-semantic-success-secondary-hover {
        color: var(--text-semantic-success-secondary-hover);
    }

    .text-semantic-success-secondary-pressed {
        color: var(--text-semantic-success-secondary-pressed);
    }

    .text-semantic-success-onneutral-default {
        color: var(--text-semantic-success-onneutral-default);
    }

    .text-semantic-success-onneutral-hover {
        color: var(--text-semantic-success-onneutral-hover);
    }

    .text-semantic-success-onneutral-pressed {
        color: var(--text-semantic-success-onneutral-pressed);
    }

    .text-semantic-success-overlay-default {
        color: var(--text-semantic-success-overlay-default);
    }

    .text-semantic-success-overlay-hover {
        color: var(--text-semantic-success-overlay-hover);
    }

    .text-semantic-success-overlay-pressed {
        color: var(--text-semantic-success-overlay-pressed);
    }

    .text-semantic-error-primary-default {
        color: var(--text-semantic-error-primary-default);
    }

    .text-semantic-error-primary-hover {
        color: var(--text-semantic-error-primary-hover);
    }

    .text-semantic-error-primary-pressed {
        color: var(--text-semantic-error-primary-pressed);
    }

    .text-semantic-error-secondary-default {
        color: var(--text-semantic-error-secondary-default);
    }

    .text-semantic-error-secondary-hover {
        color: var(--text-semantic-error-secondary-hover);
    }

    .text-semantic-error-secondary-pressed {
        color: var(--text-semantic-error-secondary-pressed);
    }

    .text-semantic-error-onneutral-default {
        color: var(--text-semantic-error-onneutral-default);
    }

    .text-semantic-error-onneutral-hover {
        color: var(--text-semantic-error-onneutral-hover);
    }

    .text-semantic-error-onneutral-pressed {
        color: var(--text-semantic-error-onneutral-pressed);
    }

    .text-semantic-error-overlay-default {
        color: var(--text-semantic-error-overlay-default);
    }

    .text-semantic-error-overlay-hover {
        color: var(--text-semantic-error-overlay-hover);
    }

    .text-semantic-error-overlay-pressed {
        color: var(--text-semantic-error-overlay-pressed);
    }

    .text-semantic-warning-primary-default {
        color: var(--text-semantic-warning-primary-default);
    }

    .text-semantic-warning-primary-hover {
        color: var(--text-semantic-warning-primary-hover);
    }

    .text-semantic-warning-primary-pressed {
        color: var(--text-semantic-warning-primary-pressed);
    }

    .text-semantic-warning-secondary-default {
        color: var(--text-semantic-warning-secondary-default);
    }

    .text-semantic-warning-secondary-hover {
        color: var(--text-semantic-warning-secondary-hover);
    }

    .text-semantic-warning-secondary-pressed {
        color: var(--text-semantic-warning-secondary-pressed);
    }

    .text-semantic-warning-onneutral-default {
        color: var(--text-semantic-warning-onneutral-default);
    }

    .text-semantic-warning-onneutral-hover {
        color: var(--text-semantic-warning-onneutral-hover);
    }

    .text-semantic-warning-onneutral-pressed {
        color: var(--text-semantic-warning-onneutral-pressed);
    }

    .text-semantic-warning-overlay-default {
        color: var(--text-semantic-warning-overlay-default);
    }

    .text-semantic-warning-overlay-hover {
        color: var(--text-semantic-warning-overlay-hover);
    }

    .text-semantic-warning-overlay-pressed {
        color: var(--text-semantic-warning-overlay-pressed);
    }

    .text-disabled-default {
        color: var(--text-disabled-default);
    }

    .text-disabled-ondisabled {
        color: var(--text-disabled-ondisabled);
    }

    .text-category-label-violet {
        color: var(--text-category-label-violet);
    }

    .text-category-label-lilac {
        color: var(--text-category-label-lilac);
    }

    .text-category-label-tangerine {
        color: var(--text-category-label-tangerine);
    }

    .text-category-label-orange {
        color: var(--text-category-label-orange);
    }

    .text-category-label-red {
        color: var(--text-category-label-red);
    }

    .text-category-label-yellow {
        color: var(--text-category-label-yellow);
    }

    .text-category-label-green {
        color: var(--text-category-label-green);
    }

    .text-category-label-blue {
        color: var(--text-category-label-blue);
    }

    .text-category-label-lightblue {
        color: var(--text-category-label-lightblue);
    }

    .text-category-label-grey {
        color: var(--text-category-label-grey);
    }

    .text-richtext-white {
        color: var(--text-richtext-white);
    }

    .text-richtext-grey {
        color: var(--text-richtext-grey);
    }

    .text-richtext-violet {
        color: var(--text-richtext-violet);
    }

    .text-richtext-blue {
        color: var(--text-richtext-blue);
    }

    .text-richtext-green {
        color: var(--text-richtext-green);
    }

    .text-richtext-yellow {
        color: var(--text-richtext-yellow);
    }

    .text-richtext-orange {
        color: var(--text-richtext-orange);
    }

    .text-richtext-red {
        color: var(--text-richtext-red);
    }

    .text-neutral-medium-default {
        color: var(--text-neutral-secondary-default);
    }

    .text-neutral-medium-hover {
        color: var(--text-neutral-secondary-hover);
    }

    .text-neutral-medium-pressed {
        color: var(--text-neutral-secondary-pressed);
    }


    .pyrion-fonts-display-large {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 56px;
        line-height: 64px;
        color: var(--black);
    }

    .pyrion-fonts-headline-xlarge {
        font-family: var(--text-headline-xlarge-font);
        font-weight: var(--text-headline-xlarge-weight);
        font-size: var(--text-headline-xlarge-size);
        line-height: var(--text-headline-xlarge-line-height);
    }

    .pyrion-fonts-headline-large {
        font-family: var(--text-headline-large-font);
        font-weight: var(--text-headline-large-weight);
        font-size: var(--text-headline-large-size);
        line-height: var(--text-headline-large-line-height);
    }

    .pyrion-fonts-headline-medium {
        font-family: var(--text-headline-medium-font);
        font-weight: var(--text-headline-medium-weight);
        font-size: var(--text-headline-medium-size);
        line-height: var(--text-headline-medium-line-height);
    }

    .pyrion-fonts-headline-small {
        font-family: var(--text-headline-small-font);
        font-weight: var(--text-headline-small-weight);
        font-size: var(--text-headline-small-size);
        line-height: var(--text-headline-small-line-height);
    }

    .pyrion-fonts-title-large {
        font-family: var(--text-title-large-font);
        font-weight: var(--text-title-large-weight);
        font-size: var(--text-title-large-size);
        line-height: var(--text-title-large-line-height);
    }

    .pyrion-fonts-title-medium {
        font-family: var(--text-title-medium-font);
        font-weight: var(--text-title-medium-weight);
        font-size: var(--text-title-medium-size);
        line-height: var(--text-title-medium-line-height);
    }

    .pyrion-fonts-title-small {
        font-family: var(--text-title-small-font);
        font-weight: var(--text-title-small-weight);
        font-size: var(--text-title-small-size);
        line-height: var(--text-title-small-line-height);
    }

    .pyrion-fonts-body-large {
        font-family: var(--text-body-large-font);
        font-weight: var(--text-body-large-weight);
        font-size: var(--text-body-large-size);
        line-height: var(--text-body-large-line-height);
    }

    .pyrion-fonts-body-medium {
        font-family: var(--text-body-medium-font);
        font-weight: var(--text-body-medium-weight);
        font-size: var(--text-body-medium-size);
        line-height: var(--text-body-medium-line-height);
    }

    .pyrion-fonts-body-small {
        font-family: var(--text-body-small-font);
        font-weight: var(--text-body-small-weight);
        font-size: var(--text-body-small-size);
        line-height: var(--text-body-small-line-height);
    }

    .pyrion-fonts-body-xsmall {
        font-family: var(--text-body-xsmall-font);
        font-weight: var(--text-body-xsmall-weight);
        font-size: var(--text-body-xsmall-size);
        line-height: var(--text-body-xsmall-line-height);
    }

    .pyrion-fonts-label-xlarge {
        font-family: var(--text-label-xlarge-font);
        font-weight: var(--text-label-xlarge-weight);
        font-size: var(--text-label-xlarge-size);
        line-height: var(--text-label-xlarge-line-height);
    }

    .pyrion-fonts-label-large {
        font-family: var(--text-label-large-font);
        font-weight: var(--text-label-large-weight);
        font-size: var(--text-label-large-size);
        line-height: var(--text-label-large-line-height);
    }

    .pyrion-fonts-label-medium {
        font-family: var(--text-label-medium-font);
        font-weight: var(--text-label-medium-weight);
        font-size: var(--text-label-medium-size);
        line-height: var(--text-label-medium-line-height);
    }

    .pyrion-fonts-label-small {
        font-family: var(--text-label-small-font);
        font-weight: var(--text-label-small-weight);
        font-size: var(--text-label-small-size);
        line-height: var(--text-label-small-line-height);
    }


    .prometeo-fonts-headline-large {
        @apply pyrion-fonts-headline-large;
    }

    .prometeo-fonts-headline-medium {
        @apply pyrion-fonts-headline-medium;
    }

    .prometeo-fonts-headline-small {
        @apply pyrion-fonts-headline-small;
    }

    .prometeo-fonts-title-large {
        @apply pyrion-fonts-title-large;
    }

    .prometeo-fonts-title-medium {
        @apply pyrion-fonts-title-medium;
    }

    .prometeo-fonts-title-small {
        @apply pyrion-fonts-title-small;
    }

    .prometeo-fonts-body-large {
        @apply pyrion-fonts-body-large;
    }

    .prometeo-fonts-body-medium {
        @apply pyrion-fonts-body-medium;
    }

    .prometeo-fonts-body-small {
        @apply pyrion-fonts-body-small;
    }

    .prometeo-fonts-body-xsmall {
        @apply pyrion-fonts-body-xsmall;
    }

    .prometeo-fonts-label-large {
        @apply pyrion-fonts-label-large;
    }

    .prometeo-fonts-label-medium {
        @apply pyrion-fonts-label-medium;
    }

    .prometeo-fonts-label-small {
        @apply pyrion-fonts-label-small;
    }


    .border-neutral-default-default {
        border-color: var(--border-neutral-default-default);
    }

    .border-neutral-default-hover {
        border-color: var(--border-neutral-default-hover);
    }

    .border-neutral-default-pressed {
        border-color: var(--border-neutral-default-pressed);
    }

    .border-neutral-primary-default {
        border-color: var(--border-neutral-primary-default);
    }

    .border-neutral-primary-hover {
        border-color: var(--border-neutral-primary-hover);
    }

    .border-neutral-primary-pressed {
        border-color: var(--border-neutral-primary-pressed);
    }

    .border-neutral-secondary-default {
        border-color: var(--border-neutral-secondary-default);
    }

    .border-neutral-secondary-hover {
        border-color: var(--border-neutral-secondary-hover);
    }

    .border-neutral-secondary-pressed {
        border-color: var(--border-neutral-secondary-pressed);
    }

    .border-brand-primary-default {
        border-color: var(--border-brand-primary-default);
    }

    .border-brand-primary-hover {
        border-color: var(--border-brand-primary-hover);
    }

    .border-brand-primary-pressed {
        border-color: var(--border-brand-primary-pressed);
    }

    .border-brand-secondary-default {
        border-color: var(--border-brand-secondary-default);
    }

    .border-brand-secondary-hover {
        border-color: var(--border-brand-secondary-hover);
    }

    .border-brand-secondary-pressed {
        border-color: var(--border-brand-secondary-pressed);
    }

    .border-brand-overlay-default {
        border-color: var(--border-brand-overlay-default);
    }

    .border-brand-overlay-hover {
        border-color: var(--border-brand-overlay-hover);
    }

    .border-brand-overlay-pressed {
        border-color: var(--border-brand-overlay-pressed);
    }

    .border-brand-onneutral-default {
        border-color: var(--border-brand-onneutral-default);
    }

    .border-brand-onneutral-hover {
        border-color: var(--border-brand-onneutral-hover);
    }

    .border-brand-onneutral-pressed {
        border-color: var(--border-brand-onneutral-pressed);
    }

    .border-error-primary-default {
        border-color: var(--border-error-primary-default);
    }

    .border-error-primary-hover {
        border-color: var(--border-error-primary-hover);
    }

    .border-error-primary-pressed {
        border-color: var(--border-error-primary-pressed);
    }

    .border-error-secondary-default {
        border-color: var(--border-error-secondary-default);
    }

    .border-error-secondary-hover {
        border-color: var(--border-error-secondary-hover);
    }

    .border-error-secondary-pressed {
        border-color: var(--border-error-secondary-pressed);
    }

    .border-error-onneutral-default {
        border-color: var(--border-error-onneutral-default);
    }

    .border-error-onneutral-hover {
        border-color: var(--border-error-onneutral-hover);
    }

    .border-error-onneutral-pressed {
        border-color: var(--border-error-onneutral-pressed);
    }

    .border-error-overlay-default {
        border-color: var(--border-error-overlay-default);
    }

    .border-error-overlay-hover {
        border-color: var(--border-error-overlay-hover);
    }

    .border-error-overlay-pressed {
        border-color: var(--border-error-overlay-pressed);
    }

    .border-success-primary-default {
        border-color: var(--border-success-primary-default);
    }

    .border-success-primary-hover {
        border-color: var(--border-success-primary-hover);
    }

    .border-success-primary-pressed {
        border-color: var(--border-success-primary-pressed);
    }

    .border-success-secondary-default {
        border-color: var(--border-success-secondary-default);
    }

    .border-success-secondary-hover {
        border-color: var(--border-success-secondary-hover);
    }

    .border-success-secondary-pressed {
        border-color: var(--border-success-secondary-pressed);
    }

    .border-success-onneutral-default {
        border-color: var(--border-success-onneutral-default);
    }

    .border-success-onneutral-hover {
        border-color: var(--border-success-onneutral-hover);
    }

    .border-success-onneutral-pressed {
        border-color: var(--border-success-onneutral-pressed);
    }

    .border-success-overlay-default {
        border-color: var(--border-success-overlay-default);
    }

    .border-success-overlay-hover {
        border-color: var(--border-success-overlay-hover);
    }

    .border-success-overlay-pressed {
        border-color: var(--border-success-overlay-pressed);
    }

    .border-warning-primary-default {
        border-color: var(--border-warning-primary-default);
    }

    .border-warning-primary-hover {
        border-color: var(--border-warning-primary-hover);
    }

    .border-warning-primary-pressed {
        border-color: var(--border-warning-primary-pressed);
    }

    .border-warning-secondary-default {
        border-color: var(--border-warning-secondary-default);
    }

    .border-warning-secondary-hover {
        border-color: var(--border-warning-secondary-hover);
    }

    .border-warning-secondary-pressed {
        border-color: var(--border-warning-secondary-pressed);
    }

    .border-warning-onneutral-default {
        border-color: var(--border-warning-onneutral-default);
    }

    .border-warning-onneutral-hover {
        border-color: var(--border-warning-onneutral-hover);
    }

    .border-warning-onneutral-pressed {
        border-color: var(--border-warning-onneutral-pressed);
    }

    .border-warning-overlay-default {
        border-color: var(--border-warning-overlay-default);
    }

    .border-warning-overlay-hover {
        border-color: var(--border-warning-overlay-hover);
    }

    .border-warning-overlay-pressed {
        border-color: var(--border-warning-overlay-pressed);
    }

    .border-pending-primary-default {
        border-color: var(--border-pending-primary-default);
    }

    .border-pending-secondary-default {
        border-color: var(--border-pending-secondary-default);
    }

    .border-pending-onneutral-default {
        border-color: var(--border-pending-onneutral-default);
    }

    .border-inprogress-primary-default {
        border-color: var(--border-inprogress-primary-default);
    }

    .border-inprogress-secondary-default {
        border-color: var(--border-inprogress-secondary-default);
    }

    .border-inprogress-onneutral-default {
        border-color: var(--border-inprogress-onneutral-default);
    }

    .border-disabled-default {
        border-color: var(--border-disabled-default);
    }

    .border-disabled-ondisabled {
        border-color: var(--border-disabled-ondisabled);
    }

    .border-category-priority-high {
        border-color: var(--border-category-priority-high);
    }

    .border-category-priority-medium {
        border-color: var(--border-category-priority-medium);
    }

    .border-category-priority-low {
        border-color: var(--border-category-priority-low);
    }

    .border-category-status-pending {
        border-color: var(--border-category-status-pending);
    }

    .border-category-status-onhold {
        border-color: var(--border-category-status-onhold);
    }

    .border-category-status-inprogress {
        border-color: var(--border-category-status-inprogress);
    }

    .border-category-status-discard {
        border-color: var(--border-category-status-discard);
    }

    .border-category-status-done {
        border-color: var(--border-category-status-done);
    }

    .border-category-label-violet {
        border-color: var(--border-category-label-violet);
    }

    .border-category-label-lilac {
        border-color: var(--border-category-label-lilac);
    }

    .border-category-label-tangerine {
        border-color: var(--border-category-label-tangerine);
    }

    .border-category-label-orange {
        border-color: var(--border-category-label-orange);
    }

    .border-category-label-red {
        border-color: var(--border-category-label-red);
    }

    .border-category-label-yellow {
        border-color: var(--border-category-label-yellow);
    }

    .border-category-label-green {
        border-color: var(--border-category-label-green);
    }

    .border-category-label-blue {
        border-color: var(--border-category-label-blue);
    }

    .border-category-label-lightblue {
        border-color: var(--border-category-label-lightblue);
    }

    .border-category-label-grey {
        border-color: var(--border-category-label-grey);
    }


    .icon-neutral-default-default {
        color: var(--icon-neutral-default-default);
        stroke: var(--icon-neutral-default-default);
        fill: var(--icon-neutral-default-default);
    }

    .icon-neutral-default-hover {
        color: var(--icon-neutral-default-hover);
        stroke: var(--icon-neutral-default-hover);
        fill: var(--icon-neutral-default-hover);
    }

    .icon-neutral-default-pressed {
        color: var(--icon-neutral-default-pressed);
        stroke: var(--icon-neutral-default-pressed);
        fill: var(--icon-neutral-default-pressed);
    }

    .icon-neutral-primary-default {
        color: var(--icon-neutral-primary-default);
        stroke: var(--icon-neutral-primary-default);
        fill: var(--icon-neutral-primary-default);
    }

    .icon-neutral-primary-hover {
        color: var(--icon-neutral-primary-hover);
        stroke: var(--icon-neutral-primary-hover);
        fill: var(--icon-neutral-primary-hover);
    }

    .icon-neutral-primary-pressed {
        color: var(--icon-neutral-primary-pressed);
        stroke: var(--icon-neutral-primary-pressed);
        fill: var(--icon-neutral-primary-pressed);
    }

    .icon-neutral-secondary-default {
        color: var(--icon-neutral-secondary-default);
        stroke: var(--icon-neutral-secondary-default);
        fill: var(--icon-neutral-secondary-default);
    }

    .icon-neutral-secondary-hover {
        color: var(--icon-neutral-secondary-hover);
        stroke: var(--icon-neutral-secondary-hover);
        fill: var(--icon-neutral-secondary-hover);
    }

    .icon-neutral-secondary-pressed {
        color: var(--icon-neutral-secondary-pressed);
        stroke: var(--icon-neutral-secondary-pressed);
        fill: var(--icon-neutral-secondary-pressed);
    }

    .icon-neutral-tertiary-default {
        color: var(--icon-neutral-tertiary-default);
        stroke: var(--icon-neutral-tertiary-default);
        fill: var(--icon-neutral-tertiary-default);
    }

    .icon-neutral-tertiary-hover {
        color: var(--icon-neutral-tertiary-hover);
        stroke: var(--icon-neutral-tertiary-hover);
        fill: var(--icon-neutral-tertiary-hover);
    }

    .icon-neutral-tertiary-pressed {
        color: var(--icon-neutral-tertiary-pressed);
        stroke: var(--icon-neutral-tertiary-pressed);
        fill: var(--icon-neutral-tertiary-pressed);
    }

    .icon-neutral-onbrandprimary-default {
        color: var(--icon-neutral-onbrandprimary-default);
        stroke: var(--icon-neutral-onbrandprimary-default);
        fill: var(--icon-neutral-onbrandprimary-default);
    }

    .icon-neutral-onbrandprimary-hover {
        color: var(--icon-neutral-onbrandprimary-hover);
        stroke: var(--icon-neutral-onbrandprimary-hover);
        fill: var(--icon-neutral-onbrandprimary-hover);
    }

    .icon-neutral-onbrandprimary-pressed {
        color: var(--icon-neutral-onbrandprimary-pressed);
        stroke: var(--icon-neutral-onbrandprimary-pressed);
        fill: var(--icon-neutral-onbrandprimary-pressed);
    }

    .icon-neutral-onbrandsecondary-default {
        color: var(--icon-neutral-onbrandsecondary-default);
        stroke: var(--icon-neutral-onbrandsecondary-default);
        fill: var(--icon-neutral-onbrandsecondary-default);
    }

    .icon-neutral-onbrandsecondary-hover {
        color: var(--icon-neutral-onbrandsecondary-hover);
        stroke: var(--icon-neutral-onbrandsecondary-hover);
        fill: var(--icon-neutral-onbrandsecondary-hover);
    }

    .icon-neutral-onbrandsecondary-pressed {
        color: var(--icon-neutral-onbrandsecondary-pressed);
        stroke: var(--icon-neutral-onbrandsecondary-pressed);
        fill: var(--icon-neutral-onbrandsecondary-pressed);
    }

    .icon-neutral-onoverlay-default {
        color: var(--icon-neutral-onoverlay-default);
        stroke: var(--icon-neutral-onoverlay-default);
        fill: var(--icon-neutral-onoverlay-default);
    }

    .icon-neutral-onoverlay-hover {
        color: var(--icon-neutral-onoverlay-hover);
        stroke: var(--icon-neutral-onoverlay-hover);
        fill: var(--icon-neutral-onoverlay-hover);
    }

    .icon-neutral-onoverlay-pressed {
        color: var(--icon-neutral-onoverlay-pressed);
        stroke: var(--icon-neutral-onoverlay-pressed);
        fill: var(--icon-neutral-onoverlay-pressed);
    }

    .icon-neutral-onsemantic-default {
        color: var(--icon-neutral-onsemantic-default);
        stroke: var(--icon-neutral-onsemantic-default);
        fill: var(--icon-neutral-onsemantic-default);
    }

    .icon-neutral-onsemantic-hover {
        color: var(--icon-neutral-onsemantic-hover);
        stroke: var(--icon-neutral-onsemantic-hover);
        fill: var(--icon-neutral-onsemantic-hover);
    }

    .icon-neutral-onsemantic-pressed {
        color: var(--icon-neutral-onsemantic-pressed);
        stroke: var(--icon-neutral-onsemantic-pressed);
        fill: var(--icon-neutral-onsemantic-pressed);
    }

    .icon-brand-primary-default {
        color: var(--icon-brand-primary-default);
        stroke: var(--icon-brand-primary-default);
        fill: var(--icon-brand-primary-default);
    }

    .icon-brand-primary-hover {
        color: var(--icon-brand-primary-hover);
        stroke: var(--icon-brand-primary-hover);
        fill: var(--icon-brand-primary-hover);
    }

    .icon-brand-primary-pressed {
        color: var(--icon-brand-primary-pressed);
        stroke: var(--icon-brand-primary-pressed);
        fill: var(--icon-brand-primary-pressed);
    }

    .icon-brand-secondary-default {
        color: var(--icon-brand-secondary-default);
        stroke: var(--icon-brand-secondary-default);
        fill: var(--icon-brand-secondary-default);
    }

    .icon-brand-secondary-hover {
        color: var(--icon-brand-secondary-hover);
        stroke: var(--icon-brand-secondary-hover);
        fill: var(--icon-brand-secondary-hover);
    }

    .icon-brand-secondary-pressed {
        color: var(--icon-brand-secondary-pressed);
        stroke: var(--icon-brand-secondary-pressed);
        fill: var(--icon-brand-secondary-pressed);
    }

    .icon-brand-overlay-default {
        color: var(--icon-brand-overlay-default);
        stroke: var(--icon-brand-overlay-default);
        fill: var(--icon-brand-overlay-default);
    }

    .icon-brand-overlay-hover {
        color: var(--icon-brand-overlay-hover);
        stroke: var(--icon-brand-overlay-hover);
        fill: var(--icon-brand-overlay-hover);
    }

    .icon-brand-overlay-pressed {
        color: var(--icon-brand-overlay-pressed);
        stroke: var(--icon-brand-overlay-pressed);
        fill: var(--icon-brand-overlay-pressed);
    }

    .icon-brand-onneutral-default {
        color: var(--icon-brand-onneutral-default);
        stroke: var(--icon-brand-onneutral-default);
        fill: var(--icon-brand-onneutral-default);
    }

    .icon-brand-onneutral-hover {
        color: var(--icon-brand-onneutral-hover);
        stroke: var(--icon-brand-onneutral-hover);
        fill: var(--icon-brand-onneutral-hover);
    }

    .icon-brand-onneutral-pressed {
        color: var(--icon-brand-onneutral-pressed);
        stroke: var(--icon-brand-onneutral-pressed);
        fill: var(--icon-brand-onneutral-pressed);
    }

    .icon-semantic-error-primary-default {
        color: var(--icon-semantic-error-primary-default);
        stroke: var(--icon-semantic-error-primary-default);
        fill: var(--icon-semantic-error-primary-default);
    }

    .icon-semantic-error-primary-hover {
        color: var(--icon-semantic-error-primary-hover);
        stroke: var(--icon-semantic-error-primary-hover);
        fill: var(--icon-semantic-error-primary-hover);
    }

    .icon-semantic-error-primary-pressed {
        color: var(--icon-semantic-error-primary-pressed);
        stroke: var(--icon-semantic-error-primary-pressed);
        fill: var(--icon-semantic-error-primary-pressed);
    }

    .icon-semantic-error-secondary-default {
        color: var(--icon-semantic-error-secondary-default);
        stroke: var(--icon-semantic-error-secondary-default);
        fill: var(--icon-semantic-error-secondary-default);
    }

    .icon-semantic-error-secondary-hover {
        color: var(--icon-semantic-error-secondary-hover);
        stroke: var(--icon-semantic-error-secondary-hover);
        fill: var(--icon-semantic-error-secondary-hover);
    }

    .icon-semantic-error-secondary-pressed {
        color: var(--icon-semantic-error-secondary-pressed);
        stroke: var(--icon-semantic-error-secondary-pressed);
        fill: var(--icon-semantic-error-secondary-pressed);
    }

    .icon-semantic-error-onneutral-default {
        color: var(--icon-semantic-error-onneutral-default);
        stroke: var(--icon-semantic-error-onneutral-default);
        fill: var(--icon-semantic-error-onneutral-default);
    }

    .icon-semantic-error-onneutral-hover {
        color: var(--icon-semantic-error-onneutral-hover);
        stroke: var(--icon-semantic-error-onneutral-hover);
        fill: var(--icon-semantic-error-onneutral-hover);
    }

    .icon-semantic-error-onneutral-pressed {
        color: var(--icon-semantic-error-onneutral-pressed);
        stroke: var(--icon-semantic-error-onneutral-pressed);
        fill: var(--icon-semantic-error-onneutral-pressed);
    }

    .icon-semantic-error-overlay-default {
        color: var(--icon-semantic-error-overlay-default);
        stroke: var(--icon-semantic-error-overlay-default);
        fill: var(--icon-semantic-error-overlay-default);
    }

    .icon-semantic-error-overlay-hover {
        color: var(--icon-semantic-error-overlay-hover);
        stroke: var(--icon-semantic-error-overlay-hover);
        fill: var(--icon-semantic-error-overlay-hover);
    }

    .icon-semantic-error-overlay-pressed {
        color: var(--icon-semantic-error-overlay-pressed);
        stroke: var(--icon-semantic-error-overlay-pressed);
        fill: var(--icon-semantic-error-overlay-pressed);
    }

    .icon-semantic-success-primary-default {
        color: var(--icon-semantic-success-primary-default);
        stroke: var(--icon-semantic-success-primary-default);
        fill: var(--icon-semantic-success-primary-default);
    }

    .icon-semantic-success-primary-hover {
        color: var(--icon-semantic-success-primary-hover);
        stroke: var(--icon-semantic-success-primary-hover);
        fill: var(--icon-semantic-success-primary-hover);
    }

    .icon-semantic-success-primary-pressed {
        color: var(--icon-semantic-success-primary-pressed);
        stroke: var(--icon-semantic-success-primary-pressed);
        fill: var(--icon-semantic-success-primary-pressed);
    }

    .icon-semantic-success-secondary-default {
        color: var(--icon-semantic-success-secondary-default);
        stroke: var(--icon-semantic-success-secondary-default);
        fill: var(--icon-semantic-success-secondary-default);
    }

    .icon-semantic-success-secondary-hover {
        color: var(--icon-semantic-success-secondary-hover);
        stroke: var(--icon-semantic-success-secondary-hover);
        fill: var(--icon-semantic-success-secondary-hover);
    }

    .icon-semantic-success-secondary-pressed {
        color: var(--icon-semantic-success-secondary-pressed);
        stroke: var(--icon-semantic-success-secondary-pressed);
        fill: var(--icon-semantic-success-secondary-pressed);
    }

    .icon-semantic-success-onneutral-default {
        color: var(--icon-semantic-success-onneutral-default);
        stroke: var(--icon-semantic-success-onneutral-default);
        fill: var(--icon-semantic-success-onneutral-default);
    }

    .icon-semantic-success-onneutral-hover {
        color: var(--icon-semantic-success-onneutral-hover);
        stroke: var(--icon-semantic-success-onneutral-hover);
        fill: var(--icon-semantic-success-onneutral-hover);
    }

    .icon-semantic-success-onneutral-pressed {
        color: var(--icon-semantic-success-onneutral-pressed);
        stroke: var(--icon-semantic-success-onneutral-pressed);
        fill: var(--icon-semantic-success-onneutral-pressed);
    }

    .icon-semantic-success-overlay-default {
        color: var(--icon-semantic-success-overlay-default);
        stroke: var(--icon-semantic-success-overlay-default);
        fill: var(--icon-semantic-success-overlay-default);
    }

    .icon-semantic-success-overlay-hover {
        color: var(--icon-semantic-success-overlay-hover);
        stroke: var(--icon-semantic-success-overlay-hover);
        fill: var(--icon-semantic-success-overlay-hover);
    }

    .icon-semantic-success-overlay-pressed {
        color: var(--icon-semantic-success-overlay-pressed);
        stroke: var(--icon-semantic-success-overlay-pressed);
        fill: var(--icon-semantic-success-overlay-pressed);
    }

    .icon-semantic-warning-primary-default {
        color: var(--icon-semantic-warning-primary-default);
        stroke: var(--icon-semantic-warning-primary-default);
        fill: var(--icon-semantic-warning-primary-default);
    }

    .icon-semantic-warning-primary-hover {
        color: var(--icon-semantic-warning-primary-hover);
        stroke: var(--icon-semantic-warning-primary-hover);
        fill: var(--icon-semantic-warning-primary-hover);
    }

    .icon-semantic-warning-primary-pressed {
        color: var(--icon-semantic-warning-primary-pressed);
        stroke: var(--icon-semantic-warning-primary-pressed);
        fill: var(--icon-semantic-warning-primary-pressed);
    }

    .icon-semantic-warning-secondary-default {
        color: var(--icon-semantic-warning-secondary-default);
        stroke: var(--icon-semantic-warning-secondary-default);
        fill: var(--icon-semantic-warning-secondary-default);
    }

    .icon-semantic-warning-secondary-hover {
        color: var(--icon-semantic-warning-secondary-hover);
        stroke: var(--icon-semantic-warning-secondary-hover);
        fill: var(--icon-semantic-warning-secondary-hover);
    }

    .icon-semantic-warning-secondary-pressed {
        color: var(--icon-semantic-warning-secondary-pressed);
        stroke: var(--icon-semantic-warning-secondary-pressed);
        fill: var(--icon-semantic-warning-secondary-pressed);
    }

    .icon-semantic-warning-onneutral-default {
        color: var(--icon-semantic-warning-onneutral-default);
        stroke: var(--icon-semantic-warning-onneutral-default);
        fill: var(--icon-semantic-warning-onneutral-default);
    }

    .icon-semantic-warning-onneutral-hover {
        color: var(--icon-semantic-warning-onneutral-hover);
        stroke: var(--icon-semantic-warning-onneutral-hover);
        fill: var(--icon-semantic-warning-onneutral-hover);
    }

    .icon-semantic-warning-onneutral-pressed {
        color: var(--icon-semantic-warning-onneutral-pressed);
        stroke: var(--icon-semantic-warning-onneutral-pressed);
        fill: var(--icon-semantic-warning-onneutral-pressed);
    }

    .icon-semantic-warning-overlay-default {
        color: var(--icon-semantic-warning-overlay-default);
        stroke: var(--icon-semantic-warning-overlay-default);
        fill: var(--icon-semantic-warning-overlay-default);
    }

    .icon-semantic-warning-overlay-hover {
        color: var(--icon-semantic-warning-overlay-hover);
        stroke: var(--icon-semantic-warning-overlay-hover);
        fill: var(--icon-semantic-warning-overlay-hover);
    }

    .icon-semantic-warning-overlay-pressed {
        color: var(--icon-semantic-warning-overlay-pressed);
        stroke: var(--icon-semantic-warning-overlay-pressed);
        fill: var(--icon-semantic-warning-overlay-pressed);
    }

    .icon-disabled-default {
        color: var(--icon-disabled-default);
        stroke: var(--icon-disabled-default);
        fill: var(--icon-disabled-default);
    }

    .icon-disabled-ondisabled {
        color: var(--icon-disabled-ondisabled);
        stroke: var(--icon-disabled-ondisabled);
        fill: var(--icon-disabled-ondisabled);
    }


    .radius-none {
        border-radius: var(--radius-none);
    }

    .radius-xsmall {
        border-radius: var(--radius-xsmall);
    }

    .radius-small {
        border-radius: var(--radius-small);
    }

    .radius-medium {
        border-radius: var(--radius-medium);
    }

    .radius-large {
        border-radius: var(--radius-large);
    }

    .radius-xlarge {
        border-radius: var(--radius-xlarge);
    }

    .radius-2xlarge {
        border-radius: var(--radius-2xlarge);
    }

    .radius-full {
        border-radius: var(--radius-pill);
    }


    .spacing-0 {
        gap: var(--pyrion-spacing-0);
    }

    .spacing-x-0 {
        column-gap: var(--pyrion-spacing-0);
    }

    .spacing-y-0 {
        row-gap: var(--pyrion-spacing-0);
    }

    .spacing-1 {
        gap: var(--pyrion-spacing-1);
    }

    .spacing-x-1 {
        column-gap: var(--pyrion-spacing-1);
    }

    .spacing-y-1 {
        row-gap: var(--pyrion-spacing-1);
    }

    .spacing-2 {
        gap: var(--pyrion-spacing-2);
    }

    .spacing-x-2 {
        column-gap: var(--pyrion-spacing-2);
    }

    .spacing-y-2 {
        row-gap: var(--pyrion-spacing-2);
    }

    .spacing-4 {
        gap: var(--pyrion-spacing-4);
    }

    .spacing-x-4 {
        column-gap: var(--pyrion-spacing-4);
    }

    .spacing-y-4 {
        row-gap: var(--pyrion-spacing-4);
    }

    .spacing-6 {
        gap: var(--pyrion-spacing-6);
    }

    .spacing-x-6 {
        column-gap: var(--pyrion-spacing-6);
    }

    .spacing-y-6 {
        row-gap: var(--pyrion-spacing-6);
    }

    .spacing-8 {
        gap: var(--pyrion-spacing-8);
    }

    .spacing-x-8 {
        column-gap: var(--pyrion-spacing-8);
    }

    .spacing-y-8 {
        row-gap: var(--pyrion-spacing-8);
    }

    .spacing-10 {
        gap: var(--pyrion-spacing-10);
    }

    .spacing-x-10 {
        column-gap: var(--pyrion-spacing-10);
    }

    .spacing-y-10 {
        row-gap: var(--pyrion-spacing-10);
    }

    .spacing-12 {
        gap: var(--pyrion-spacing-12);
    }

    .spacing-x-12 {
        column-gap: var(--pyrion-spacing-12);
    }

    .spacing-y-12 {
        row-gap: var(--pyrion-spacing-12);
    }

    .spacing-14 {
        gap: var(--pyrion-spacing-14);
    }

    .spacing-x-14 {
        column-gap: var(--pyrion-spacing-14);
    }

    .spacing-y-14 {
        row-gap: var(--pyrion-spacing-14);
    }

    .spacing-16 {
        gap: var(--pyrion-spacing-16);
    }

    .spacing-x-16 {
        column-gap: var(--pyrion-spacing-16);
    }

    .spacing-y-16 {
        row-gap: var(--pyrion-spacing-16);
    }

    .spacing-18 {
        gap: var(--pyrion-spacing-18);
    }

    .spacing-x-18 {
        column-gap: var(--pyrion-spacing-18);
    }

    .spacing-y-18 {
        row-gap: var(--pyrion-spacing-18);
    }

    .spacing-20 {
        gap: var(--pyrion-spacing-20);
    }

    .spacing-x-20 {
        column-gap: var(--pyrion-spacing-20);
    }

    .spacing-y-20 {
        row-gap: var(--pyrion-spacing-20);
    }

    .spacing-24 {
        gap: var(--pyrion-spacing-24);
    }

    .spacing-x-24 {
        column-gap: var(--pyrion-spacing-24);
    }

    .spacing-y-24 {
        row-gap: var(--pyrion-spacing-24);
    }

    .spacing-28 {
        gap: var(--pyrion-spacing-28);
    }

    .spacing-x-28 {
        column-gap: var(--pyrion-spacing-28);
    }

    .spacing-y-28 {
        row-gap: var(--pyrion-spacing-28);
    }

    .spacing-32 {
        gap: var(--pyrion-spacing-32);
    }

    .spacing-x-32 {
        column-gap: var(--pyrion-spacing-32);
    }

    .spacing-y-32 {
        row-gap: var(--pyrion-spacing-32);
    }


    .aspect-golden {
        aspect-ratio: 1.61803398875;
    }

    .aspect-golden-inverse {
        aspect-ratio: 0.61803398875;
    }


    .dropshadow-100 {
        box-shadow: var(--dropshadow-100);
    }

    .dropshadow-200 {
        box-shadow: var(--dropshadow-200);
    }

    .dropshadow-300 {
        box-shadow: var(--dropshadow-300);
    }

    .dropshadow-400 {
        box-shadow: var(--dropshadow-400);
    }

    .dropshadow-500 {
        box-shadow: var(--dropshadow-500);
    }


    .prometeo-gradient-bg {
        @apply pyrion-gradient-bg;
    }

    .prometeo-gradient-border {
        @apply pyrion-gradient-border;
    }


    .ring-primary-default-default {
        --tw-ring-color: var(--primary-400);
    }

    .ring-primary-default-hover {
        --tw-ring-color: var(--primary-600);
    }

    .ring-primary-default-pressed {
        --tw-ring-color: var(--primary-600);
    }

    .ring-primary-default-focused {
        --tw-ring-color: var(--primary-600);
    }

    .ring-success-default-default {
        --tw-ring-color: var(--success-500);
    }

    .ring-success-default-hover {
        --tw-ring-color: var(--success-600);
    }

    .ring-success-default-pressed {
        --tw-ring-color: var(--success-600);
    }

    .ring-success-default-focused {
        --tw-ring-color: var(--success-700);
    }

    .ring-warning-default-default {
        --tw-ring-color: var(--warning-500);
    }

    .ring-warning-default-hover {
        --tw-ring-color: var(--warning-600);
    }

    .ring-warning-default-pressed {
        --tw-ring-color: var(--warning-700);
    }

    .ring-warning-default-focused {
        --tw-ring-color: var(--warning-700);
    }

    .ring-error-default-default {
        --tw-ring-color: var(--error-500);
    }

    .ring-error-default-hover {
        --tw-ring-color: var(--error-600);
    }

    .ring-error-default-pressed {
        --tw-ring-color: var(--error-700);
    }

    .ring-error-default-focused {
        --tw-ring-color: var(--error-700);
    }


    .prometeo-scrollbar-thin {
        @apply pyrion-scrollbar-thin;
    }

    .prometeo-scrollbar-thin-weak {
        @apply pyrion-scrollbar-thin-weak;
    }

    .prometeo-scrollbar-overlay {
        @apply pyrion-scrollbar-overlay;
    }

    .prometeo-scrollbar-overlay-x {
        @apply pyrion-scrollbar-overlay-x;
    }

    .prometeo-scrollbar-none {
        @apply pyrion-scrollbar-none;
    }


    .pyrion-scrollbar-medium {
        --scrollbar-size: 4px;
        --scrollbar-track: var(--bg-neutral-tertiary-default);
        --scrollbar-thumb: var(--bg-brand-secondary-hover);
        --scrollbar-border-width: 1px;
    }

    .pyrion-scrollbar-large {
        --scrollbar-size: 8px;
        --scrollbar-track: var(--bg-neutral-tertiary-default);
        --scrollbar-thumb: var(--bg-brand-secondary-hover);
        --scrollbar-border-width: 2px;
    }

    .pyrion-scrollbar-thin {
        @apply pyrion-scrollbar-medium;
    }

    .pyrion-scrollbar-thin-weak {
        @apply pyrion-scrollbar-medium;
    }

    .pyrion-scrollbar-none {
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
        display: none;
        }
    }


    .scrollbar-stable {
        scrollbar-gutter: stable;
    }

    .scrollbar-stable-both-edges {
        scrollbar-gutter: stable both-edges;
    }

    .scrollbar-stable-auto {
        scrollbar-gutter: auto;
    }


    .pyrion-scrollbar-overlay {
        --sb-overlay-size: 8px;
        padding-inline-end: var(--sb-overlay-size) !important;
        margin-inline-end: calc(-1 * var(--sb-overlay-size)) !important;
        &::-webkit-scrollbar {
        width: var(--sb-overlay-size);
        }
    }

    .pyrion-scrollbar-overlay-x {
        --sb-overlay-size: 8px;
        padding-block-end: var(--sb-overlay-size) !important;
        margin-block-end: calc(-1 * var(--sb-overlay-size)) !important;
        &::-webkit-scrollbar {
        height: var(--sb-overlay-size);
        }
    }


    .fill-dataviz-series-1 {
        fill: var(--fill-dataviz-series-1);
    }

    .fill-dataviz-series-2 {
        fill: var(--fill-dataviz-series-2);
    }

    .fill-dataviz-series-3 {
        fill: var(--fill-dataviz-series-3);
    }

    .fill-dataviz-series-4 {
        fill: var(--fill-dataviz-series-4);
    }

    .fill-dataviz-series-5 {
        fill: var(--fill-dataviz-series-5);
    }

    .fill-dataviz-series-6 {
        fill: var(--fill-dataviz-series-6);
    }

    .fill-dataviz-series-7 {
        fill: var(--fill-dataviz-series-7);
    }

    .fill-dataviz-series-8 {
        fill: var(--fill-dataviz-series-8);
    }

    .fill-dataviz-series-9 {
        fill: var(--fill-dataviz-series-9);
    }

    .fill-dataviz-sequential-indigo-1 {
        fill: var(--fill-dataviz-sequential-indigo-1);
    }

    .fill-dataviz-sequential-indigo-2 {
        fill: var(--fill-dataviz-sequential-indigo-2);
    }

    .fill-dataviz-sequential-indigo-3 {
        fill: var(--fill-dataviz-sequential-indigo-3);
    }

    .fill-dataviz-sequential-indigo-4 {
        fill: var(--fill-dataviz-sequential-indigo-4);
    }

    .fill-dataviz-sequential-indigo-5 {
        fill: var(--fill-dataviz-sequential-indigo-5);
    }

    .fill-dataviz-sequential-indigo-6 {
        fill: var(--fill-dataviz-sequential-indigo-6);
    }

    .fill-dataviz-sequential-orange-1 {
        fill: var(--fill-dataviz-sequential-orange-1);
    }

    .fill-dataviz-sequential-orange-2 {
        fill: var(--fill-dataviz-sequential-orange-2);
    }

    .fill-dataviz-sequential-orange-3 {
        fill: var(--fill-dataviz-sequential-orange-3);
    }

    .fill-dataviz-sequential-orange-4 {
        fill: var(--fill-dataviz-sequential-orange-4);
    }

    .fill-dataviz-sequential-orange-5 {
        fill: var(--fill-dataviz-sequential-orange-5);
    }

    .fill-dataviz-sequential-orange-6 {
        fill: var(--fill-dataviz-sequential-orange-6);
    }

    .fill-dataviz-diverging-1 {
        fill: var(--fill-dataviz-diverging-1);
    }

    .fill-dataviz-diverging-2 {
        fill: var(--fill-dataviz-diverging-2);
    }

    .fill-dataviz-diverging-3 {
        fill: var(--fill-dataviz-diverging-3);
    }

    .fill-dataviz-diverging-4 {
        fill: var(--fill-dataviz-diverging-4);
    }

    .fill-dataviz-diverging-5 {
        fill: var(--fill-dataviz-diverging-5);
    }

    .fill-dataviz-diverging-6 {
        fill: var(--fill-dataviz-diverging-6);
    }

    .fill-dataviz-diverging-7 {
        fill: var(--fill-dataviz-diverging-7);
    }

    .fill-dataviz-diverging-8 {
        fill: var(--fill-dataviz-diverging-8);
    }

    .fill-dataviz-diverging-9 {
        fill: var(--fill-dataviz-diverging-9);
    }


    .stroke-dataviz-series-1 {
        stroke: var(--stroke-dataviz-series-1);
    }

    .stroke-dataviz-series-2 {
        stroke: var(--stroke-dataviz-series-2);
    }

    .stroke-dataviz-series-3 {
        stroke: var(--stroke-dataviz-series-3);
    }

    .stroke-dataviz-series-4 {
        stroke: var(--stroke-dataviz-series-4);
    }

    .stroke-dataviz-series-5 {
        stroke: var(--stroke-dataviz-series-5);
    }

    .stroke-dataviz-series-6 {
        stroke: var(--stroke-dataviz-series-6);
    }

    .stroke-dataviz-series-7 {
        stroke: var(--stroke-dataviz-series-7);
    }

    .stroke-dataviz-series-8 {
        stroke: var(--stroke-dataviz-series-8);
    }

    .stroke-dataviz-series-9 {
        stroke: var(--stroke-dataviz-series-9);
    }

    .stroke-dataviz-sequential-indigo-1 {
        stroke: var(--stroke-dataviz-sequential-indigo-1);
    }

    .stroke-dataviz-sequential-indigo-2 {
        stroke: var(--stroke-dataviz-sequential-indigo-2);
    }

    .stroke-dataviz-sequential-indigo-3 {
        stroke: var(--stroke-dataviz-sequential-indigo-3);
    }

    .stroke-dataviz-sequential-indigo-4 {
        stroke: var(--stroke-dataviz-sequential-indigo-4);
    }

    .stroke-dataviz-sequential-indigo-5 {
        stroke: var(--stroke-dataviz-sequential-indigo-5);
    }

    .stroke-dataviz-sequential-indigo-6 {
        stroke: var(--stroke-dataviz-sequential-indigo-6);
    }

    .stroke-dataviz-sequential-orange-1 {
        stroke: var(--stroke-dataviz-sequential-orange-1);
    }

    .stroke-dataviz-sequential-orange-2 {
        stroke: var(--stroke-dataviz-sequential-orange-2);
    }

    .stroke-dataviz-sequential-orange-3 {
        stroke: var(--stroke-dataviz-sequential-orange-3);
    }

    .stroke-dataviz-sequential-orange-4 {
        stroke: var(--stroke-dataviz-sequential-orange-4);
    }

    .stroke-dataviz-sequential-orange-5 {
        stroke: var(--stroke-dataviz-sequential-orange-5);
    }

    .stroke-dataviz-sequential-orange-6 {
        stroke: var(--stroke-dataviz-sequential-orange-6);
    }

    .stroke-dataviz-diverging-1 {
        stroke: var(--stroke-dataviz-diverging-1);
    }

    .stroke-dataviz-diverging-2 {
        stroke: var(--stroke-dataviz-diverging-2);
    }

    .stroke-dataviz-diverging-3 {
        stroke: var(--stroke-dataviz-diverging-3);
    }

    .stroke-dataviz-diverging-4 {
        stroke: var(--stroke-dataviz-diverging-4);
    }

    .stroke-dataviz-diverging-5 {
        stroke: var(--stroke-dataviz-diverging-5);
    }

    .stroke-dataviz-diverging-6 {
        stroke: var(--stroke-dataviz-diverging-6);
    }

    .stroke-dataviz-diverging-7 {
        stroke: var(--stroke-dataviz-diverging-7);
    }

    .stroke-dataviz-diverging-8 {
        stroke: var(--stroke-dataviz-diverging-8);
    }

    .stroke-dataviz-diverging-9 {
        stroke: var(--stroke-dataviz-diverging-9);
    }


    .pwa-safe-padding {
        [data-os="android"] & {
        padding-bottom: 40px;
        }
        @media (display-mode: standalone) {
        [data-os="ios"] & {
        padding-bottom: 40px;
        }
    }


    .pyrion-gradient-bg {
        background: linear-gradient(135.9deg, var(--brand-500) 0%, var(--pyrion-orange-500) 90%);
    }

    .pyrion-gradient-border {
        border-image: linear-gradient(to bottom, var(--primary-950) 0%, var(--primary-900) 100%);
    }

}