/* DPI-aware button sizing
   Uses CSS variable --dpi_comp set by App to compensate for system scaling
   Ensures visual button size and proportions remain consistent across DPI/zoom */
.hip-button {
    background-color: white;
    color: black;
    border-radius: 10em;
    /* Use clamp to ensure buttons are responsive but don't get comically large */
    font-size: clamp(1rem, 2vmin, 1.5rem);
    font-weight: 600;
    padding: 0.75em 1.5em;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    --btn_outline: black;
    --btn_text: black;
    border: calc(2px * var(--dpi_comp, 1)) solid var(--btn_outline);
    box-shadow: 0 0 0 0 var(--btn_outline);
    outline: none;
    /* Prevent text wrapping */
    white-space: nowrap;
}

.hip-button:hover {
    transform: translateY(calc(-4px * var(--dpi_comp, 1))) translateX(calc(-2px * var(--dpi_comp, 1)));
    box-shadow: calc(2px * var(--dpi_comp, 1)) calc(5px * var(--dpi_comp, 1)) 0 0 var(--btn_outline);
}

.hip-button:active {
    transform: translateY(calc(2px * var(--dpi_comp, 1))) translateX(calc(1px * var(--dpi_comp, 1)));
    box-shadow: 0 0 0 0 var(--btn_outline);
}

/* Color variants using palette */
.hip-button.primary {
    background-color: #00D2FF;
    color: #0f172a;
    --btn_outline: #00AAC8;
}

.hip-button.secondary {
    background-color: #FFBE5A;
    color: #0f172a;
    --btn_outline: #B45309;
}

.hip-button.success {
    background-color: #8CDC96;
    color: #0f172a;
    --btn_outline: #4CA656;
}

.hip-button.danger {
    background-color: #FF3F7F;
    color: #ffffff;
    --btn_outline: #9C1F55;
}

/* Selected category chip */
.chip-selected {
    background-color: #00D2FF;
    border: 2px solid #00AAC8;
    color: #0f172a;
}


.ui-container {
    border: 2px solid #0f172a;
    border-radius: 2em;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ui-container:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.25);
    border-color: #00D2FF;
}

.text-\[12vmin\] {
    font-size: 20vmin;
}