/* ============================================================
   Innovation CCTV — shared stylesheet
   Replaces the inline <style> block on all five pages.
   Load AFTER the Tailwind script, BEFORE </head>.
   ============================================================ */

/* ---------- 1. Fonts ---------------------------------------- */
/* Loaded via <link> in <head>, not @import — see note in the
   integration guide. Kept here only as a fallback declaration. */


/* ---------- 2. Tokens --------------------------------------- */
:root {
    --bg-dark:        #121416;
    --card-bg:        #1c1f23;
    --accent-blue:    #3b82f6;
    --cloud-dancer:   #f8f7f2;

    --surface-raised: #1c1f23;
    --surface-sunk:   #0f1113;
    --surface-deep:   #0a0c0e;
    --surface-foot:   #0b0c0e;

    --radius-card:    2.5rem;
}

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: var(--bg-dark);
    color: var(--cloud-dancer);
    overflow-x: hidden;
}


/* ---------- 3. Components ----------------------------------- */
.bento-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bento-card:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: var(--accent-blue);
    box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.1);
}

.glass-nav {
    background: rgba(15, 17, 19, 0.7);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Keep the mobile menu trigger legible in all three modes */
#menu-icon { color: var(--cloud-dancer) !important; }

/* Hero video (index) */
.hero-video-container {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; overflow: hidden;
}
.hero-video { object-fit: cover; width: 100%; height: 100%; opacity: 0.35; }
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(15,17,19,0.2) 0%, rgba(15,17,19,1) 95%);
}

/* Comparison slider (index) */
#comparison-slider {
    position: relative; width: 100%; height: 500px;
    overflow: hidden; border-radius: 2rem; cursor: col-resize;
}
#after-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("https://images.unsplash.com/photo-1563720223185-11003d516935?auto=format&fit=crop&q=80&w=1600");
    background-size: cover; background-position: center;
}
#before-image {
    position: absolute; top: 0; left: 0; width: 50%; height: 100%;
    background-image: url("https://images.unsplash.com/photo-1563720223185-11003d516935?auto=format&fit=crop&q=1&w=1600&blur=5");
    background-size: cover; background-position: center;
    border-right: 3px solid var(--accent-blue);
    filter: grayscale(100%) contrast(1.1) brightness(0.8);
}
#before-image::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.1) 50%),
        linear-gradient(90deg, rgba(255,0,0,0.03), rgba(0,255,0,0.01), rgba(0,0,255,0.03));
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
}
.slider-handle {
    position: absolute; top: 50%; right: -20px;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    z-index: 10;
}

/* Progress bars (breakdown) */
.progress-bar  { height: 10px; background: var(--surface-sunk); border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent-blue); width: 0; transition: width 1.5s ease-out; }


/* ---------- 4. Focus visibility (NEW) ----------------------- */
/* Was missing site-wide. Applies in all three modes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ---------- 5. Light theme ---------------------------------- */
/* MERGED: index.html's coverage, using the interior pages'
   gray palette. Fixes the inverted depth scale, the invisible
   footer headings, and the unstyled text-blue-500. */
.light-theme {
    --bg-dark:        #f3f4f6;
    --card-bg:        #ffffff;
    --accent-blue:    #1d4ed8;
    --cloud-dancer:   #111827;
    --surface-raised: #ffffff;
    --surface-sunk:   #f9fafb;   /* FIXED: was darker than --surface-deep */
    --surface-deep:   #e5e7eb;   /* FIXED: swapped */
    --surface-foot:   #111827;
}
.light-theme body {
    background-color: var(--bg-dark);
    color: var(--cloud-dancer);
}

/* Text */
.light-theme .text-white         { color: #111827 !important; }
.light-theme .text-gray-300      { color: #374151 !important; }
.light-theme .text-gray-400      { color: #4b5563 !important; }
.light-theme .text-gray-500      { color: #6b7280 !important; }
.light-theme .text-gray-600      { color: #4b5563 !important; }
.light-theme h1                  { color: #030712 !important; }
.light-theme h2, .light-theme h3 { color: #111827 !important; }
.light-theme h4, .light-theme h5 { color: #1f2937 !important; }

/* Accents — blue-500 was previously unstyled at 3.68:1 on white */
.light-theme .text-blue-400,
.light-theme .text-blue-500   { color: #1d4ed8 !important; }  /* FIXED: 6.7:1 */
.light-theme .text-purple-500 { color: #7e22ce !important; }
.light-theme .text-green-500  { color: #15803d !important; }
.light-theme .text-green-400  { color: #16a34a !important; }
.light-theme .text-cyan-500   { color: #0e7490 !important; }
.light-theme .text-red-500    { color: #b91c1c !important; }
.light-theme .text-orange-500 { color: #c2410c !important; }

/* Category washes — hues stay DISTINCT (interior pages collapsed
   all of these to one blue, destroying the category system and
   the semantic callouts on the legal pages) */
.light-theme .bg-blue-600\/10,
.light-theme .bg-blue-600\/15,
.light-theme .bg-blue-600\/20,
.light-theme .bg-blue-500\/10,
.light-theme .bg-blue-950\/20   { background-color: rgba(29,78,216,0.08) !important;  border: 1px solid rgba(29,78,216,0.2); }
.light-theme .bg-purple-500\/20,
.light-theme .bg-purple-600\/10,
.light-theme .bg-purple-600\/15 { background-color: rgba(126,34,206,0.08) !important; border: 1px solid rgba(126,34,206,0.2); }
.light-theme .bg-green-500\/10,
.light-theme .bg-green-500\/20,
.light-theme .bg-green-600\/10,
.light-theme .bg-green-600\/15,
.light-theme .bg-green-950\/20  { background-color: rgba(21,128,61,0.08) !important;  border: 1px solid rgba(21,128,61,0.2); }
.light-theme .bg-cyan-500\/20,
.light-theme .bg-cyan-600\/15   { background-color: rgba(14,116,144,0.08) !important; border: 1px solid rgba(14,116,144,0.2); }
.light-theme .bg-red-500\/20,
.light-theme .bg-red-600\/15    { background-color: rgba(185,28,28,0.08) !important;  border: 1px solid rgba(185,28,28,0.2); }
.light-theme .bg-orange-500\/20,
.light-theme .bg-orange-600\/15,
.light-theme .bg-orange-950\/10 { background-color: rgba(194,65,12,0.08) !important;  border: 1px solid rgba(194,65,12,0.2); }
.light-theme .bg-black\/20,
.light-theme .bg-black\/30      { background-color: rgba(17,24,39,0.05) !important; }
.light-theme .bg-black\/60      { background-color: rgba(17,24,39,0.85) !important; }
.light-theme .bg-gray-900       { background-color: #f3f4f6 !important; border: 1px solid rgba(17,24,39,0.1); }

/* Surfaces */
.light-theme .bento-card {
    background: #ffffff;
    border: 1px solid rgba(17,24,39,0.08);
    box-shadow: 0 1px 3px 0 rgba(17,24,39,0.06), 0 1px 2px -1px rgba(17,24,39,0.04);
}
.light-theme .bento-card:hover {
    border-color: rgba(29,78,216,0.15);
    box-shadow: 0 4px 12px -2px rgba(29,78,216,0.1), 0 2px 6px -2px rgba(17,24,39,0.08);
    transform: translateY(-2px);
}
.light-theme .glass-nav {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(17,24,39,0.08);
}
.light-theme section.py-24,
.light-theme section.py-32                { background-color: #ffffff; }
.light-theme section.bg-\[\#0a0c0e\],
.light-theme section.bg-\[\#0f1113\]      { background-color: #f9fafb !important; }
.light-theme .bg-gradient-to-b            { background: linear-gradient(to bottom, #ffffff 0%, #f3f4f6 100%) !important; }
.light-theme .bg-\[\#1c1f23\]\/50,
.light-theme .bg-\[\#1c1f23\]\/60,
.light-theme .bg-\[\#1c1f23\]\/40,
.light-theme .bg-\[\#1c1f23\]\/30 {
    background-color: rgba(255,255,255,0.9) !important;
    border-color: rgba(17,24,39,0.1) !important;
}

/* Footer stays dark — so its text must NOT follow the light rules.
   Without these two rules the column headers render #111827 on
   #0b0c0e: 1.1:1, effectively invisible. */
.light-theme footer                { background-color: #111827 !important; }
.light-theme footer .text-white    { color: #f9fafb !important; }
.light-theme footer h5             { color: #f9fafb !important; }
.light-theme footer .text-gray-500,
.light-theme footer .text-gray-400 { color: #9ca3af !important; }
.light-theme footer a:hover        { color: #93c5fd !important; }

/* Buttons */
.light-theme .bg-blue-600 {
    background-color: #1d4ed8 !important;
    box-shadow: 0 2px 8px -2px rgba(29,78,216,0.3);
}
.light-theme .bg-blue-600:hover,
.light-theme .hover\:bg-blue-700:hover {
    background-color: #1e40af !important;
    box-shadow: 0 4px 12px -2px rgba(29,78,216,0.4);
}
.light-theme a.bg-white         { background-color: #111827 !important; color: #ffffff !important; }
.light-theme a.bg-white:hover   { background-color: #1d4ed8 !important; color: #ffffff !important; }

/* Borders, shadows, forms */
.light-theme .border-gray-700,
.light-theme .border-gray-800,
.light-theme .border-gray-900     { border-color: rgba(17,24,39,0.1) !important; }
.light-theme .border-blue-500\/20,
.light-theme .border-blue-400\/20 { border-color: rgba(29,78,216,0.25) !important; }
.light-theme .shadow-lg           { box-shadow: 0 4px 16px -4px rgba(17,24,39,0.1) !important; }
.light-theme .shadow-xl,
.light-theme .shadow-2xl          { box-shadow: 0 8px 32px -8px rgba(17,24,39,0.12), 0 4px 16px -4px rgba(17,24,39,0.08) !important; }
.light-theme input,
.light-theme textarea             { background-color: #ffffff !important; border-color: #d1d5db !important; color: #111827 !important; }

/* Hero */
.light-theme header       { background: linear-gradient(135deg, #eff6ff 0%, #f3f4f6 50%, #fef2f2 100%); }
.light-theme .hero-video  { opacity: 0.08 !important; }
.light-theme .hero-overlay {
    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(243,244,246,0.95) 95%) !important;
}
.light-theme #comparison-slider { border: 2px solid rgba(17,24,39,0.1); }
.light-theme #before-image      { border-right-color: #1d4ed8 !important; }
.light-theme #mobile-cta a {
    background-color: #1d4ed8 !important;
    border-color: rgba(29,78,216,0.3) !important;
    box-shadow: 0 8px 24px -6px rgba(29,78,216,0.4) !important;
}


/* ---------- 6. High contrast -------------------------------- */
/* MERGED: the interior pages' yellow accent (17.6:1) plus
   index.html's nav / input / link-underline rules plus the
   interior pages' button override.
   To switch to cyan: change #ffff00 to #00ffff below. */
.high-contrast {
    --bg-dark:        #000000;
    --card-bg:        #111111;
    --accent-blue:    #ffff00;
    --cloud-dancer:   #ffffff;
    --surface-raised: #111111;
    --surface-sunk:   #000000;
    --surface-deep:   #000000;
    --surface-foot:   #000000;
}
.high-contrast body {
    background-color: #000000 !important;
    color: #ffffff !important;
}
.high-contrast .bento-card {
    background: #111111 !important;
    border: 2px solid #ffffff !important;
}
.high-contrast .text-gray-300,
.high-contrast .text-gray-400,
.high-contrast .text-gray-500,
.high-contrast .text-gray-600 { color: #ffffff !important; }   /* gray-600 added */

.high-contrast .text-blue-400,
.high-contrast .text-blue-500 { color: #ffff00 !important; }

/* Category hues drop to white — legibility beats taxonomy here,
   and the icon plus label already carry the category. */
.high-contrast .text-purple-500,
.high-contrast .text-green-400,
.high-contrast .text-green-500,
.high-contrast .text-cyan-500,
.high-contrast .text-red-500,
.high-contrast .text-orange-500 { color: #ffffff !important; }

.high-contrast [class*="bg-purple-"],
.high-contrast [class*="bg-green-"],
.high-contrast [class*="bg-orange-"],
.high-contrast [class*="bg-red-"],
.high-contrast [class*="bg-cyan-"] {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* Buttons — index.html was missing this; bg-blue-600 on black is 3.7:1 */
.high-contrast .bg-blue-500,
.high-contrast .bg-blue-600 {
    background-color: #ffff00 !important;
    color: #000000 !important;
}
.high-contrast .bg-blue-600 * { color: #000000 !important; }

.high-contrast a { text-decoration: underline; }
.high-contrast .glass-nav {
    background: #000000 !important;
    border-bottom: 2px solid #ffffff !important;
}
.high-contrast input,
.high-contrast textarea {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}
.high-contrast .hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 95%) !important;
}
.high-contrast .progress-bar  { background: #000000 !important; border: 1px solid #ffffff; }
.high-contrast .progress-fill { background: #ffff00 !important; }
.high-contrast footer         { background-color: #000000 !important; }
.high-contrast a:focus-visible,
.high-contrast button:focus-visible { outline: 3px solid #ffff00; outline-offset: 3px; }


/* ---------- 7. Reduced motion (NEW) ------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-video { display: none; }
}
