body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoom-in {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

.animate-in {
    animation: fade-in 0.5s ease-out, zoom-in 0.5s ease-out;
}

::selection {
    background: var(--gray-200);
}

input::placeholder, textarea::placeholder {
    color: var(--text-default-quaternary) !important;
    opacity: 1;
}

input[type="checkbox"]:checked {
    background: var(--bg-interaction-primary-default);
    border-color: var(--bg-interaction-primary-default);
}

input[type="checkbox"]:hover {
    border-color: var(--gray-400);
}

a:hover {
    color: var(--text-default-primary);
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Icon styles */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}