/* iOS-specific styles */
@supports (-webkit-touch-callout: none) {
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    }
}

/* Android-specific styles */
@supports (not (-webkit-touch-callout: none)) {
    body {
        font-family: Roboto, Arial, sans-serif;
    }

    button {
        font-family: Roboto, Arial, sans-serif;
        background-color: var(--primary);
        color: var(--surface);
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

        button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: ripple 0.6s linear;
        }
}

/* Windows-specific styles (mouse-based interaction) */
@media (pointer: fine) and (hover: hover) {
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    button {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: var(--surface);
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

        button:hover {
            background-color: var(--primary-dark);
        }
}