/* ============================================
 * AuthMe — Global CSS Variables & Typography
 * ============================================
 *
 * This file contains ONLY:
 *   - CSS custom properties (color, spacing, etc.)
 *   - Font imports & typography base
 *
 * No layout or component CSS here.
 *
 * @package AuthMe
 * ============================================ */

/* ── Google Fonts Import ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables ───────────────────────── */
:root {

    /* Primary palette */
    --authme-primary: #2563eb;
    --authme-primary-hover: #1d4ed8;
    --authme-primary-ring: rgba(37, 99, 235, 0.15);

    /* Status colors */
    --authme-success: #16a34a;
    --authme-success-bg: #f0fdf4;
    --authme-error: #dc2626;
    --authme-error-bg: #fef2f2;
    --authme-warning: #f59e0b;
    --authme-warning-bg: #fffbeb;
    --authme-info: #2563eb;
    --authme-info-bg: #eff6ff;

    /* Text */
    --authme-text-main: #0f172a;
    --authme-text-muted: #64748b;
    --authme-text-placeholder: #94a3b8;

    /* Backgrounds & surfaces */
    --authme-bg: #f8fafc;
    --authme-card-bg: #ffffff;
    --authme-input-bg: #ffffff;

    /* Borders */
    --authme-border: #e2e8f0;

    /* Border radius */
    --authme-radius-sm: 8px;
    --authme-radius-md: 10px;
    --authme-radius-lg: 20px;

    /* Shadows */
    --authme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --authme-shadow-md: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    --authme-shadow-lg: 0 20px 60px -15px rgba(0, 0, 0, 0.12);

    /* Font */
    --authme-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Typography Base ─────────────────────── */
.authme-overlay-backdrop,
.authme-overlay-container,
.authme-toaster-container {
    font-family: var(--authme-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

.authme-overlay-container *,
.authme-toaster-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input{
    height: 45px;
}