/* ========================================
   CSS Variables & Theme (Blue)
   ======================================== */
:root {
    /* --- Brand Colors (Blue/Cyan) --- */
    --primary: #2563eb;
    --primary-rgb: 37, 99, 235;
    --primary-dark: #1e3a8a;
    --primary-dark-rgb: 30, 58, 138;
    --primary-light: #60a5fa;
    --primary-light-rgb: 96, 165, 250;
    --primary-deep: #172554;
    --primary-deep-rgb: 23, 37, 84;
    --primary-midnight: #0a1128;
    --primary-midnight-rgb: 10, 17, 40;

    --accent: #06b6d4;
    --accent-rgb: 6, 182, 212;
    --accent-dark: #0e7490;
    --accent-dark-rgb: 14, 116, 144;
    --accent-red: #f43f5e;
    --accent-red-rgb: 244, 63, 94;

    /* --- Blue Extended Palette --- */
    --emerald-50: #eff6ff;
    /* Renamed logically to blue in variables but kept name if styles use them */
    --emerald-100: #dbeafe;
    --emerald-200: #bfdbfe;
    --emerald-800: #1e40af;

    /* --- Neutrals (Slate/Gray) --- */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;
    --transparent: transparent;

    /* --- Special Themes (Amber) --- */
    --amber-50: #fffbeb;
    --amber-50-rgb: 255, 251, 235;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-400: #fbbf24;
    --amber-400-rgb: 251, 191, 36;
    --amber-500: #f59e0b;
    --amber-700: #b45309;
    --amber-700-rgb: 180, 83, 9;
    --amber-800: #92400e;

    --accent-blue-rgb: 31, 38, 135;

    /* --- Success/Viber/Telegram/WhatsApp --- */
    --success-bg: #eff6ff;
    --success-text: #2563eb;
    --viber: #7360f2;
    /* Custom Viber Purple */
    --viber-bg: #f5f3ff;
    --telegram: #0088cc;
    --telegram-bg: #f0f9ff;
    --whatsapp: #25d366;
    --whatsapp-bg: #ecfdf5;

    /* --- Gradients --- */
    --gradient-main: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 100%);
    --gradient-glow: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    --gradient-warm: linear-gradient(135deg, var(--primary) 0%, var(--accent) 70%, var(--accent-red) 100%);
    --gradient-glass: linear-gradient(145deg, rgba(var(--white-rgb), 0.9) 0%, rgba(var(--white-rgb), 0.6) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(var(--primary-deep-rgb), 0.8) 0%, rgba(var(--primary-dark-rgb), 0.9) 100%);
    --gradient-hero-overlay: linear-gradient(90deg, var(--primary-midnight) 0%, rgba(var(--primary-deep-rgb), 0.9) 50%, rgba(var(--primary-deep-rgb), 0.6) 100%);
    --gradient-hero-radial: radial-gradient(circle at 80% 20%, rgba(var(--accent-red-rgb), 0.15), var(--transparent) 40%);
    --gradient-cta: linear-gradient(135deg, var(--primary-dark) 0%, var(--emerald-800) 100%);

    /* --- Semantics --- */
    --bg-body: var(--slate-50);
    --text-main: var(--slate-900);
    --text-muted: var(--slate-600);

    /* --- Decoration & Shadows --- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --shadow-sm: 0 4px 6px -1px rgba(var(--black-rgb), 0.05);
    --shadow-glass: 0 8px 32px 0 rgba(var(--accent-blue-rgb), 0.07);
    --shadow-hover: 0 20px 40px -5px rgba(var(--primary-rgb), 0.15);
    --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.4);

    /* --- Fonts --- */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* --- Layout --- */
    --header-height: 80px;
    --container-width: 1280px;
}