:root {
    color-scheme: light;

    --biomi-navy-950: #07112f;
    --biomi-navy-900: #0d1b4c;
    --biomi-navy-800: #162b68;
    --biomi-gold-500: #f5a623;
    --biomi-gold-400: #ffb733;
    --biomi-white: #ffffff;
    --biomi-gray-50: #f8f9fb;
    --biomi-gray-100: #eef0f4;
    --biomi-gray-500: #6b7280;
    --biomi-gray-700: #374151;
    --biomi-success: #16794b;
    --biomi-danger: #b42318;

    --biomi-text: var(--biomi-navy-900);
    --biomi-text-muted: var(--biomi-gray-500);
    --biomi-surface: var(--biomi-white);
    --biomi-surface-soft: var(--biomi-gray-50);
    --biomi-border: var(--biomi-gray-100);
    --biomi-action: var(--biomi-navy-900);
    --biomi-action-text: var(--biomi-white);
    --biomi-highlight: var(--biomi-gold-500);
    --biomi-highlight-text: var(--biomi-navy-950);

    --biomi-radius-sm: 0.5rem;
    --biomi-radius-md: 0.875rem;
    --biomi-radius-lg: 1.25rem;
    --biomi-shadow-sm: 0 0.125rem 0.5rem rgb(13 27 76 / 8%);
    --biomi-shadow-md: 0 0.75rem 2rem rgb(13 27 76 / 12%);

    --biomi-space-1: 0.25rem;
    --biomi-space-2: 0.5rem;
    --biomi-space-3: 0.75rem;
    --biomi-space-4: 1rem;
    --biomi-space-5: 1.5rem;
    --biomi-space-6: 2rem;
    --biomi-content-width: 75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--biomi-text);
    background: var(--biomi-surface-soft);
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 20rem;
    margin: 0;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 0.1875rem solid var(--biomi-gold-500);
    outline-offset: 0.1875rem;
}

.biomi-container {
    width: min(100% - 2rem, var(--biomi-content-width));
    margin-inline: auto;
}

.biomi-brand-logo {
    width: clamp(10rem, 28vw, 18rem);
    height: auto;
}

.biomi-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--biomi-space-2);
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: var(--biomi-radius-md);
    color: var(--biomi-action-text);
    background: var(--biomi-action);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.biomi-button:hover {
    box-shadow: var(--biomi-shadow-sm);
    transform: translateY(-0.0625rem);
}

.biomi-button:active {
    box-shadow: none;
    transform: translateY(0);
}

.biomi-button--highlight {
    color: var(--biomi-highlight-text);
    background: var(--biomi-highlight);
}

.biomi-button:disabled,
.biomi-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.biomi-card {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 0.0625rem solid var(--biomi-border);
    border-radius: var(--biomi-radius-lg);
    background: var(--biomi-surface);
    box-shadow: var(--biomi-shadow-sm);
}

.biomi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--biomi-space-4);
}

@media (max-width: 40rem) {
    .biomi-container {
        width: min(100% - 1.25rem, var(--biomi-content-width));
    }

    .biomi-button--mobile-full {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}