html[data-theme="dark"] {
}

:root {
    --color-dark: #141414;
    --color-neutral: #faf5f5;
    --color-primary: #00ff00;
    --color-secondary: #9673ff;
    --color-additional-01: #ff3719;
    --color-additional-02: #66f2ff;

    --color-primary-tint-01: #009900;
    --color-primary-tint-02: #00be00;
    --color-primary-tint-03: #00d300;
    --color-primary-tint-04: #00ea00;
    --color-primary-tint-05: #a3ff90;
    --color-primary-tint-06: #ccffbe;
    --color-primary-tint-07: #ebffe5;

    --color-secondary-tint-01: #4d2eed;
    --color-secondary-tint-02: #5c33f4;
    --color-secondary-tint-03: #7952fe;
    --color-secondary-tint-04: #b69dfe;
    --color-secondary-tint-05: #d4c4fe;
    --color-secondary-tint-06: #efe7ff;
}

.tag-wrapper {
    display: inline-flex;
    align-items: center;
}

.inline-icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: text-top;
    margin: 0 0.2em;
}

.campstyle-pink {
    color: #FB48C4;
}

.campstyle-green {
    color: #3FFF21;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em; /* Space between icon and text */
    padding: 0.35em 0.85em;
    border-radius: 2em; /* Creates the pill shape */
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    height: 1.8em;
}

.badge .icon {
    padding: 0;
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

.badge.status-neutral {
    background-color: #374151; /* Light gray */
    /* color: #374151; Dark gray */
}