/**
 * Theme Colors CSS
 * Provides all theme color classes for header and UI elements
 * Also includes Almarai font support for invoices
 */

/* ================================================
   GOOGLE FONTS - ALMARAI
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* ================================================
   LOCAL ARABIC FONT - DroidSansArabic Fallback
   ================================================ */
@font-face {
    font-family: 'ArabicFont';
    src: url('/fonts/almarai/DroidSansArabic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ArabicFont';
    src: url('/fonts/almarai/DroidSansArabic.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ================================================
   INVOICE FONT CLASSES
   ================================================ */
.invoice-font-almarai,
.invoice-almarai,
.font-almarai {
    font-family: 'Almarai', 'ArabicFont', 'Droid Sans Arabic', sans-serif !important;
}

/* Apply Almarai to invoice content when theme font is almarai */
body.theme-font-almarai,
body.theme-font-almarai * {
    font-family: 'Almarai', 'ArabicFont', 'Droid Sans Arabic', sans-serif !important;
}

/* Invoice print section Arabic font */
.print_section,
.print_section *,
#receipt_section,
#receipt_section * {
    font-family: 'Almarai', 'ArabicFont', 'Droid Sans Arabic', Arial, sans-serif !important;
}

@media print {
    .print_section,
    .print_section *,
    #receipt_section,
    #receipt_section *,
    table, td, th, tr, tbody, thead, div, span, p {
        font-family: 'Almarai', 'ArabicFont', 'Droid Sans Arabic', Arial, sans-serif !important;
    }
}

/* ================================================
   THEME COLOR VARIABLES
   ================================================ */
:root {
    /* Blues */
    --color-primary-700: #004eeb;
    --color-primary-800: #0040c1;
    --color-primary-900: #00359e;
    --color-sky-700: #026aa2;
    --color-sky-800: #065986;
    --color-sky-900: #0b4a6f;
    --color-cyan-700: #0e7490;
    --color-cyan-800: #155e75;
    --color-cyan-900: #164e63;
    --color-indigo-700: #4338ca;
    --color-indigo-800: #3730a3;
    --color-indigo-900: #312e81;
    
    /* Purples & Pinks */
    --color-purple-700: #5925dc;
    --color-purple-800: #4a1fb8;
    --color-purple-900: #3e1c96;
    --color-violet-700: #6d28d9;
    --color-violet-800: #5b21b6;
    --color-violet-900: #4c1d95;
    --color-fuchsia-700: #a21caf;
    --color-fuchsia-800: #86198f;
    --color-fuchsia-900: #701a75;
    --color-pink-700: #be185d;
    --color-pink-800: #9d174d;
    --color-pink-900: #831843;
    --color-rose-700: #be123c;
    --color-rose-800: #9f1239;
    --color-rose-900: #881337;
    
    /* Greens */
    --color-green-700: #067647;
    --color-green-800: #085d3a;
    --color-green-900: #074d31;
    --color-emerald-700: #047857;
    --color-emerald-800: #065f46;
    --color-emerald-900: #064e3b;
    --color-teal-700: #0f766e;
    --color-teal-800: #115e59;
    --color-teal-900: #134e4a;
    --color-lime-700: #4d7c0f;
    --color-lime-800: #3f6212;
    --color-lime-900: #365314;
    
    /* Warm Colors */
    --color-red-700: #b42318;
    --color-red-800: #912018;
    --color-red-900: #7a271a;
    --color-orange-700: #b93815;
    --color-orange-800: #932f19;
    --color-orange-900: #772917;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
    --color-yellow-700: #b54708;
    --color-yellow-800: #93370d;
    --color-yellow-900: #7a2e0e;
    
    /* Neutrals */
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-gray-700: #364152;
    --color-gray-800: #1f2937;
    --color-gray-900: #121926;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-stone-700: #44403c;
    --color-stone-800: #292524;
    --color-stone-900: #1c1917;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
}

/* ================================================
   BACKGROUND COLOR CLASSES
   ================================================ */

/* Blues */
.tw-bg-cyan-700 { background-color: var(--color-cyan-700) !important; }
.tw-bg-cyan-800 { background-color: var(--color-cyan-800) !important; }
.tw-bg-cyan-900 { background-color: var(--color-cyan-900) !important; }
.tw-bg-indigo-700 { background-color: var(--color-indigo-700) !important; }
.tw-bg-indigo-800 { background-color: var(--color-indigo-800) !important; }
.tw-bg-indigo-900 { background-color: var(--color-indigo-900) !important; }

/* Purples & Pinks */
.tw-bg-violet-700 { background-color: var(--color-violet-700) !important; }
.tw-bg-violet-800 { background-color: var(--color-violet-800) !important; }
.tw-bg-violet-900 { background-color: var(--color-violet-900) !important; }
.tw-bg-fuchsia-700 { background-color: var(--color-fuchsia-700) !important; }
.tw-bg-fuchsia-800 { background-color: var(--color-fuchsia-800) !important; }
.tw-bg-fuchsia-900 { background-color: var(--color-fuchsia-900) !important; }
.tw-bg-pink-700 { background-color: var(--color-pink-700) !important; }
.tw-bg-pink-800 { background-color: var(--color-pink-800) !important; }
.tw-bg-pink-900 { background-color: var(--color-pink-900) !important; }
.tw-bg-rose-700 { background-color: var(--color-rose-700) !important; }
.tw-bg-rose-800 { background-color: var(--color-rose-800) !important; }
.tw-bg-rose-900 { background-color: var(--color-rose-900) !important; }

/* Greens */
.tw-bg-emerald-700 { background-color: var(--color-emerald-700) !important; }
.tw-bg-emerald-800 { background-color: var(--color-emerald-800) !important; }
.tw-bg-emerald-900 { background-color: var(--color-emerald-900) !important; }
.tw-bg-teal-700 { background-color: var(--color-teal-700) !important; }
.tw-bg-teal-800 { background-color: var(--color-teal-800) !important; }
.tw-bg-teal-900 { background-color: var(--color-teal-900) !important; }
.tw-bg-lime-700 { background-color: var(--color-lime-700) !important; }
.tw-bg-lime-800 { background-color: var(--color-lime-800) !important; }
.tw-bg-lime-900 { background-color: var(--color-lime-900) !important; }

/* Warm Colors */
.tw-bg-amber-700 { background-color: var(--color-amber-700) !important; }
.tw-bg-amber-800 { background-color: var(--color-amber-800) !important; }
.tw-bg-amber-900 { background-color: var(--color-amber-900) !important; }

/* Neutrals */
.tw-bg-slate-700 { background-color: var(--color-slate-700) !important; }
.tw-bg-slate-800 { background-color: var(--color-slate-800) !important; }
.tw-bg-slate-900 { background-color: var(--color-slate-900) !important; }
.tw-bg-zinc-700 { background-color: var(--color-zinc-700) !important; }
.tw-bg-zinc-800 { background-color: var(--color-zinc-800) !important; }
.tw-bg-zinc-900 { background-color: var(--color-zinc-900) !important; }
.tw-bg-stone-700 { background-color: var(--color-stone-700) !important; }
.tw-bg-stone-800 { background-color: var(--color-stone-800) !important; }
.tw-bg-stone-900 { background-color: var(--color-stone-900) !important; }
.tw-bg-neutral-700 { background-color: var(--color-neutral-700) !important; }
.tw-bg-neutral-800 { background-color: var(--color-neutral-800) !important; }
.tw-bg-neutral-900 { background-color: var(--color-neutral-900) !important; }

/* ================================================
   HOVER BACKGROUND COLOR CLASSES
   ================================================ */

/* Blues */
.hover\:tw-bg-cyan-700:hover { background-color: var(--color-cyan-700) !important; }
.hover\:tw-bg-indigo-700:hover { background-color: var(--color-indigo-700) !important; }

/* Purples & Pinks */
.hover\:tw-bg-violet-700:hover { background-color: var(--color-violet-700) !important; }
.hover\:tw-bg-fuchsia-700:hover { background-color: var(--color-fuchsia-700) !important; }
.hover\:tw-bg-pink-700:hover { background-color: var(--color-pink-700) !important; }
.hover\:tw-bg-rose-700:hover { background-color: var(--color-rose-700) !important; }

/* Greens */
.hover\:tw-bg-emerald-700:hover { background-color: var(--color-emerald-700) !important; }
.hover\:tw-bg-teal-700:hover { background-color: var(--color-teal-700) !important; }
.hover\:tw-bg-lime-700:hover { background-color: var(--color-lime-700) !important; }

/* Warm Colors */
.hover\:tw-bg-amber-700:hover { background-color: var(--color-amber-700) !important; }

/* Neutrals */
.hover\:tw-bg-slate-700:hover { background-color: var(--color-slate-700) !important; }
.hover\:tw-bg-zinc-700:hover { background-color: var(--color-zinc-700) !important; }
.hover\:tw-bg-stone-700:hover { background-color: var(--color-stone-700) !important; }
.hover\:tw-bg-neutral-700:hover { background-color: var(--color-neutral-700) !important; }

/* ================================================
   GRADIENT FROM CLASSES
   ================================================ */

/* Blues */
.tw-from-cyan-800 { --tw-gradient-from: var(--color-cyan-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-indigo-800 { --tw-gradient-from: var(--color-indigo-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Purples & Pinks */
.tw-from-violet-800 { --tw-gradient-from: var(--color-violet-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-fuchsia-800 { --tw-gradient-from: var(--color-fuchsia-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-pink-800 { --tw-gradient-from: var(--color-pink-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-rose-800 { --tw-gradient-from: var(--color-rose-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Greens */
.tw-from-emerald-800 { --tw-gradient-from: var(--color-emerald-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-teal-800 { --tw-gradient-from: var(--color-teal-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-lime-800 { --tw-gradient-from: var(--color-lime-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Warm Colors */
.tw-from-amber-800 { --tw-gradient-from: var(--color-amber-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Neutrals */
.tw-from-slate-800 { --tw-gradient-from: var(--color-slate-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-zinc-800 { --tw-gradient-from: var(--color-zinc-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-stone-800 { --tw-gradient-from: var(--color-stone-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.tw-from-neutral-800 { --tw-gradient-from: var(--color-neutral-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* ================================================
   GRADIENT TO CLASSES
   ================================================ */

/* Blues */
.tw-to-cyan-900 { --tw-gradient-to: var(--color-cyan-900); }
.tw-to-indigo-900 { --tw-gradient-to: var(--color-indigo-900); }

/* Purples & Pinks */
.tw-to-violet-900 { --tw-gradient-to: var(--color-violet-900); }
.tw-to-fuchsia-900 { --tw-gradient-to: var(--color-fuchsia-900); }
.tw-to-pink-900 { --tw-gradient-to: var(--color-pink-900); }
.tw-to-rose-900 { --tw-gradient-to: var(--color-rose-900); }

/* Greens */
.tw-to-emerald-900 { --tw-gradient-to: var(--color-emerald-900); }
.tw-to-teal-900 { --tw-gradient-to: var(--color-teal-900); }
.tw-to-lime-900 { --tw-gradient-to: var(--color-lime-900); }

/* Warm Colors */
.tw-to-amber-900 { --tw-gradient-to: var(--color-amber-900); }

/* Neutrals */
.tw-to-slate-900 { --tw-gradient-to: var(--color-slate-900); }
.tw-to-zinc-900 { --tw-gradient-to: var(--color-zinc-900); }
.tw-to-stone-900 { --tw-gradient-to: var(--color-stone-900); }
.tw-to-neutral-900 { --tw-gradient-to: var(--color-neutral-900); }

/* ================================================
   INVOICE PRINT STYLES WITH ALMARAI
   ================================================ */
@media print {
    .invoice-font-almarai,
    .invoice-almarai,
    .font-almarai,
    body.theme-font-almarai,
    body.theme-font-almarai * {
        font-family: 'Almarai', sans-serif !important;
    }
}

/* ================================================
   RECEIPT/INVOICE STYLES
   ================================================ */
#invoice_content.font-almarai,
#invoice_content.font-almarai * {
    font-family: 'Almarai', sans-serif !important;
}

.receipt-almarai {
    font-family: 'Almarai', sans-serif !important;
}

/* Arabic text direction support */
.rtl-text {
    direction: rtl;
    text-align: right;
}

.ltr-text {
    direction: ltr;
    text-align: left;
}