/*
 * Marsoul brand asset for Filament panels.
 * Registered as a plain CSS asset (no Vite theme compilation).
 * Imports Cairo from Google Fonts and applies a light, Apple-HIG-feel polish.
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    --marsoul-ink: #0b1220;
    --marsoul-teal: #12a594;
    --marsoul-teal-600: #0e8a7c;
}

.fi {
    font-family: 'Cairo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Slightly tighter, clearer type for that clean admin feel */
.fi h1,
.fi h2,
.fi h3,
.fi h4 {
    letter-spacing: -0.01em;
}

/* Brand logo sizing inside the sidebar / auth screens */
.fi-logo img,
.fi-brand-logo img {
    max-height: 2.25rem;
    width: auto;
}

[dir='rtl'] .fi-logo img,
[dir='rtl'] .fi-brand-logo img {
    /* RTL logo swap is handled via brandLogo() per-locale; keep sizing consistent */
    max-height: 2.25rem;
}

/* Auth card: calm, spacious, centered brand mark */
.fi-logo,
.fi-brand-logo {
    align-items: center;
}

/* Cleaner focus ring using the teal brand color */
.fi-focus:focus-visible,
.fi-input:focus-visible,
.fi-select select:focus-visible,
[role='button']:focus-visible {
    outline-color: var(--marsoul-teal);
}