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

@font-face {
    font-family: 'Twemoji Country Flags';
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0067, U+E007F;
    src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
}

:root {
    --primary: #e05a2b;
    --primary-hover: #c44a1f;
    --primary-light: #fff0eb;
    --primary-muted: rgba(224, 90, 43, 0.12);
    --secondary: #1e3a5f;
    --success: #0d9f6e;
    --danger: #dc3d4a;
    --warning: #d97706;
    --bg-main: #ffffff;
    --bg-surface: #f3f5f8;
    --bg-light: #e8ecf1;
    --bg-dark: #121820;
    --bg-elevated: #fafbfc;
    --text-main: #141a22;
    --text-muted: #5c6b7a;
    --text-light: #8b99a8;
    --text-white: #ffffff;
    --border-color: #d8dee6;
    --border-light: #e8ecf1;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --shadow-sm: 0 1px 2px rgba(18, 24, 32, 0.05);
    --shadow-card: 0 2px 8px rgba(18, 24, 32, 0.04), 0 1px 2px rgba(18, 24, 32, 0.03);
    --shadow-md: 0 8px 24px rgba(18, 24, 32, 0.08), 0 2px 6px rgba(18, 24, 32, 0.04);
    --shadow-lg: 0 20px 40px rgba(18, 24, 32, 0.12), 0 4px 12px rgba(18, 24, 32, 0.05);
    --transition-fast: 0.15s ease;
    --transition-base: 0.22s ease;
    --transition-slow: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    --font-display: 'Rubik', 'Twemoji Country Flags', system-ui, sans-serif;
    --font-body: 'Rubik', 'Twemoji Country Flags', system-ui, sans-serif;
    --focus-ring: 0 0 0 3px var(--primary-muted);
}

@media (max-width: 767px) {
    :root {
        --radius-xl: 18px;
        --radius-lg: 13px;
    }
}

@media (max-width: 480px) {
    :root {
        --radius-xl: 14px;
        --radius-lg: 10px;
        --radius-md: 8px;
    }
}