/* ==========================================
   SKD Fire Safety - Global & Theme Stylesheet
   ========================================== */

/* ==========================================
   MASTER COLOR PALETTE (වර්ණ වෙනස් කරන්නේ මෙතනින්)
   ========================================== */
:root {
    /* --- 1. සාමාන්‍ය පිටු වර්ණ (Global Page Colors) --- */
    --color-page-bg: #31273e;          /* පිටුවේ පසුබිම */
    --color-main-text: #fafcff;        /* සාමාන්‍ය අකුරු වර්ණය */
    --color-heading: #eef1f7;          /* මාතෘකා (H1, H2) වර්ණය */
    --color-muted-text: #ebeef3;       /* ලා අකුරු (විස්තර) වර්ණය */
    --color-sub-text: #f6faff;         /* උප මාතෘකා වර්ණය */

    /* --- 2. Navigation Bar (මෙනුව) --- */
    --color-nav-bg: #161313;           /* මෙනුවේ පසුබිම */
    --color-nav-text: #ffffff;         /* මෙනුවේ අකුරු */
    --color-nav-hover: #fde047;        /* මෙනුව Hover වූ විට (කහ) */
    --color-nav-active: #fde047;       /* මෙනුව Active වූ විට (කහ) */
    --color-nav-mobile-bg: #161313;    /* මොබයිල් මෙනුවේ පසුබිම */

    /* --- 3. Footer (පාදම) --- */
    --color-footer-bg: #0f172a;        /* Footer පසුබිම */

    /* --- 4. Product Cards (භාණ්ඩ කාඩ්පත්) --- */
    --color-card-bg: #31273e;          /* කාඩ්පතේ පසුබිම */
    --color-card-border: #ffffff;      /* කාඩ්පතේ බෝඩරය */
    --color-code-badge-bg: #fee2e2;    /* භාණ්ඩ කේතයේ පසුබිම */
    --color-code-badge-text: #0b19da;  /* භාණ්ඩ කේතයේ අකුරු */
    --color-price-text: #fffefe;       /* භාණ්ඩයේ මිල (Price) */
    --color-image-bg: #31273e;         /* ඡායාරූපයේ පසුබිම */

    /* --- 5. Buttons (බොත්තම්) --- */
    --color-btn-whatsapp-bg: #16a34a;  /* WhatsApp බොත්තමේ පසුබිම */
    --color-btn-whatsapp-hover: #15803d;/* WhatsApp බොත්තම Hover */
    --color-btn-primary-bg: #4c8f0e;   /* Download බොත්තමේ පසුබිම */
    --color-btn-primary-hover: #3d720b;/* Download බොත්තම Hover */
    --color-btn-contact-bg: #dc2626;   /* සම්බන්ධ වන්න බොත්තම් */
    --color-btn-contact-hover: #b91c1c;
    --color-btn-secondary-bg: #1e293b; /* ද්විතීයික බොත්තම් */
    --color-btn-secondary-hover: #334155;

    /* --- 6. Forms (පෝරම) --- */
    --color-input-border: #cbd5e1;     /* Input බෝඩර් */
    --color-input-focus-ring: #dc2626; /* Input Focus වූ විට */
    --color-label-text: #334155;       /* පෝරම ලේබල් */

    /* --- 7. Status Badges (තොග තත්ත්වය - JS මගින් වෙනස් වන) --- */
    --color-status-instock-bg: #dcfce7;   /* තොග ඇත පසුබිම */
    --color-status-instock-text: #15803d; /* තොග ඇත අකුරු */
    --color-status-outstock-bg: #e2e8f0;  /* තොග නැත පසුබිම */
    --color-status-outstock-text: #475569;/* තොග නැත අකුරු */

    /* --- 8. Download Page Icons (බාගැනීම් පිටුවේ අයිකන) --- */
    --color-dl-red-bg: #fee2e2;      /* රතු අයිකනයේ පසුබිම */
    --color-dl-red-text: #dc2626;    /* රතු අයිකනයේ අකුරු */
    --color-dl-blue-bg: #dbeafe;     /* නිල් අයිකනයේ පසුබිම */
    --color-dl-blue-text: #2563eb;   /* නිල් අයිකනයේ අකුරු */
    --color-dl-cyan-bg: #cffafe;     /* සයන් අයිකනයේ පසුබිම */
    --color-dl-cyan-text: #0891b2;   /* සයන් අයිකනයේ අකුරු */
    --color-dl-amber-bg: #fef3c7;    /* කහ අයිකනයේ පසුබිම */
    --color-dl-amber-text: #b45309;  /* කහ අයිකනයේ අකුරු */

    /* --- 9. Contact Page Icons (සම්බන්ධ වන්න පිටුවේ අයිකන) --- */
    --color-ct-phone-bg: #fee2e2;    /* දුරකථන අයිකනයේ පසුබිම */
    --color-ct-phone-text: #330caa;  /* දුරකථන අයිකනයේ අකුරු */
    --color-ct-email-bg: #dbeafe;    /* ඊමේල් අයිකනයේ පසුබිම */
    --color-ct-email-text: #f0f3f9;  /* ඊමේල් අයිකනයේ අකුරු */
    --color-ct-loc-bg: #cffafe;      /* ස්ථාන අයිකනයේ පසුබිම */
    --color-ct-loc-text: #eaf2f5;    /* ස්ථාන අයිකනයේ අකුරු */

    /* --- 10. Hero Section (මුල් පිටුවේ ඉහළ කොටස) --- */
    --color-hero-grad-start: #0f172a; /* Gradient ආරම්භය */
    --color-hero-grad-mid: #450a0a;   /* Gradient මැද */
    --color-hero-grad-end: #0f172a;   /* Gradient අවසානය */
    --color-hero-accent: #ef4444;     /* විශේෂ අකුරු (Top Priority) */
    --color-hero-text-muted: #cbd5e1; /* Hero කොටසේ ලා අකුරු */
}

/* ==========================================
   GLOBAL SETTINGS
   ========================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-page-bg);
    color: var(--color-main-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Typography & Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-weight: 700;
}

/* Cards & Hover Effects */
.product-card, .info-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.product-card:hover, .info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Product Card Images Fix */
.product-card img {
    width: 100%;
    height: 12rem;
    object-fit: contain;
    background-color: var(--color-image-bg);
    padding: 0.75rem;
}

/* Custom Buttons */
.btn-primary {
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--color-btn-primary-hover);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-page-bg);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================
   TAILWIND OVERRIDE RULES 
   (මෙම කොටස වෙනස් නොකරන්න. වර්ණ වෙනස් කරන්නේ ඉහත :root කොටසින්)
   ========================================== */

/* Backgrounds */
body { background-color: var(--color-page-bg) !important; color: var(--color-main-text) !important; }
.bg-slate-50 { background-color: var(--color-page-bg) !important; }
.bg-white { background-color: var(--color-card-bg) !important; }
.bg-slate-100 { background-color: var(--color-image-bg) !important; }
.bg-red-100 { background-color: var(--color-code-badge-bg) !important; }
.bg-gray-200 { background-color: var(--color-status-outstock-bg) !important; }
.bg-green-100 { background-color: var(--color-status-instock-bg) !important; }
.bg-green-600 { background-color: var(--color-btn-whatsapp-bg) !important; }
.bg-red-800 { background-color: var(--color-nav-mobile-bg) !important; }
.bg-slate-800 { background-color: var(--color-btn-secondary-bg) !important; }
.bg-slate-700 { background-color: var(--color-btn-secondary-hover) !important; }
.bg-red-600 { background-color: var(--color-btn-contact-bg) !important; }
.bg-red-700 { background-color: var(--color-btn-contact-hover) !important; }

/* Text Colors */
.text-slate-800 { color: var(--color-main-text) !important; }
.text-slate-900 { color: var(--color-heading) !important; }
.text-slate-500 { color: var(--color-muted-text) !important; }
.text-slate-600 { color: var(--color-sub-text) !important; }
.text-slate-700 { color: var(--color-label-text) !important; }
.text-slate-300 { color: var(--color-hero-text-muted) !important; }
.text-red-600 { color: var(--color-code-badge-text) !important; }
.text-red-500 { color: var(--color-hero-accent) !important; }
.text-green-700 { color: var(--color-status-instock-text) !important; }
.text-gray-600 { color: var(--color-status-outstock-text) !important; }

/* Special: Product Price IDs */
[id^="price-"] { color: var(--color-price-text) !important; }

/* Navigation Bar */
.theme-nav { background-color: var(--color-nav-bg) !important; }
.theme-nav a { color: var(--color-nav-text); }
.theme-nav a.hover\:text-yellow-300:hover { color: var(--color-nav-hover) !important; }
.theme-nav a.text-yellow-300 { color: var(--color-nav-active) !important; }
.theme-nav .text-yellow-300 { color: var(--color-nav-active) !important; }

/* Footer */
.theme-footer { background-color: var(--color-footer-bg) !important; }

/* Borders */
.border-slate-200 { border-color: var(--color-card-border) !important; }
.border-slate-300 { border-color: var(--color-input-border) !important; }

/* Buttons & Hovers */
.hover\:bg-green-700:hover { background-color: var(--color-btn-whatsapp-hover) !important; }
.hover\:bg-red-700:hover { background-color: var(--color-btn-contact-hover) !important; }
.hover\:bg-slate-700:hover { background-color: var(--color-btn-secondary-hover) !important; }

/* Focus Rings */
.focus\:ring-green-500:focus { --tw-ring-color: var(--color-input-focus-ring) !important; }
.focus\:ring-red-500:focus { --tw-ring-color: var(--color-input-focus-ring) !important; }

/* Downloads Page Icons */
.bg-blue-100 { background-color: var(--color-dl-blue-bg) !important; }
.text-blue-600 { color: var(--color-dl-blue-text) !important; }
.bg-cyan-100 { background-color: var(--color-dl-cyan-bg) !important; }
.text-cyan-600 { color: var(--color-dl-cyan-text) !important; }
.bg-amber-100 { background-color: var(--color-dl-amber-bg) !important; }
.text-amber-700 { color: var(--color-dl-amber-text) !important; }

/* Contact Page Icons */
.theme-icon-bg { background-color: var(--color-ct-phone-bg) !important; color: var(--color-ct-phone-text) !important; }

/* Hero Section Gradient */
.bg-gradient-to-r.from-slate-900.via-red-950.to-slate-900 {
    background: linear-gradient(to right, var(--color-hero-grad-start), var(--color-hero-grad-mid), var(--color-hero-grad-end)) !important;
}