/* ========================================
   CSS Variables & Theme (Orange)
   ======================================== */
:root {
    /* --- Brand Colors (Orange/Amber) --- */
    --primary: #f97316;
    --primary-rgb: 249, 115, 22;
    --primary-dark: #c2410c;
    --primary-dark-rgb: 194, 65, 12;
    --primary-light: #fb923c;
    --primary-light-rgb: 251, 146, 60;
    --primary-deep: #431407;
    --primary-deep-rgb: 67, 20, 7;
    --primary-midnight: #2d0a03;
    --primary-midnight-rgb: 45, 10, 3;

    --accent: #fbbf24;
    --accent-rgb: 251, 191, 36;
    --accent-dark: #f59e0b;
    --accent-dark-rgb: 245, 158, 11;
    --accent-red: #ef4444;
    --accent-red-rgb: 239, 68, 68;

    /* --- Orange Extended Palette --- */
    --emerald-50: #fff7ed;
    --emerald-100: #ffedd5;
    --emerald-200: #fed7aa;
    --emerald-800: #9a3412;

    /* --- 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: #fff7ed;
    --success-text: #f97316;
    --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;
}