/* ═══════════════════════════════════════════════════════════
   CG SAGE — Theme layer
   1. Site-wide polish (both themes)
   2. Theme toggle button
   3. Light-mode palette (html.light overrides)
   Include on every page AFTER the page's own <style> block.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1 · POLISH — applies to both themes
───────────────────────────────────────────── */
:root{color-scheme:dark}
html.light{color-scheme:light}

::selection{background:rgba(139,92,246,.35);color:inherit}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #0fb5ba;outline-offset:3px;border-radius:4px}

/* Animated gradient underline on desktop nav links */
#desktopNav > div > a{position:relative;padding-bottom:2px}
#desktopNav > div > a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#8B5CF6,#06B6D4);transition:width .35s cubic-bezier(.16,1,.3,1)}
#desktopNav > div > a:hover::after{width:100%}

/* Smooth cross-fade while switching themes (class added briefly by theme.js) */
html.theme-anim,html.theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,box-shadow .35s ease!important}

/* ─────────────────────────────────────────────
   2 · THEME TOGGLE BUTTON (injected by theme.js)
───────────────────────────────────────────── */
.theme-toggle{width:40px;height:40px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#e4e4e7;transition:border-color .3s,color .3s,background .3s,transform .3s}
.theme-toggle:hover{border-color:#0fb5ba;color:#0fb5ba;transform:rotate(18deg)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-moon{display:none}
.theme-toggle .icon-sun{display:block}
html.light .theme-toggle{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.14);color:#3f3f46}
html.light .theme-toggle .icon-sun{display:none}
html.light .theme-toggle .icon-moon{display:block}

/* ─────────────────────────────────────────────
   3 · LIGHT MODE PALETTE
───────────────────────────────────────────── */
html.light body{background:#f7f7f9;color:#18181b}

/* Scrollbar */
html.light ::-webkit-scrollbar-track{background:#f7f7f9}
html.light ::-webkit-scrollbar-thumb{background:#c9c9d1}
html.light ::-webkit-scrollbar-thumb:hover{background:#a8a8b3}

/* Neutral text utilities remapped */
html.light .text-white{color:#18181b}
html.light .text-zinc-200{color:#27272a}
html.light .text-zinc-400{color:#52525b}
html.light .text-zinc-500{color:#71717a}
html.light .text-zinc-600{color:#a1a1aa}
html.light .hover\:text-white:hover{color:#09090b}

/* Accent text: darker shades for contrast on light bg */
html.light .text-cyan-400{color:#0e7490}
html.light .text-violet-400{color:#6d28d9}
html.light .text-fuchsia-400{color:#a21caf}
html.light .text-cyan-300{color:#0e7490}
html.light .text-violet-300{color:#6d28d9}
html.light .text-fuchsia-300{color:#a21caf}
html.light .text-emerald-300{color:#047857}
html.light .hover\:text-violet-300:hover{color:#7c3aed}
html.light .hover\:text-cyan-300:hover{color:#0891b2}
html.light .hover\:text-fuchsia-300:hover{color:#c026d3}

/* Gradient headline stops — deepen for legibility */
html.light .from-violet-400{--tw-gradient-from:#6d28d9 var(--tw-gradient-from-position);--tw-gradient-to:rgb(109 40 217 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
html.light .from-cyan-400{--tw-gradient-from:#0e7490 var(--tw-gradient-from-position);--tw-gradient-to:rgb(14 116 144 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
html.light .via-fuchsia-400{--tw-gradient-to:rgb(162 28 175 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#a21caf var(--tw-gradient-via-position),var(--tw-gradient-to)}
html.light .to-cyan-400{--tw-gradient-to:#0e7490 var(--tw-gradient-to-position)}
html.light .to-violet-400{--tw-gradient-to:#6d28d9 var(--tw-gradient-to-position)}

/* White-alpha surfaces → black-alpha */
html.light .bg-white{background-color:#27272a}          /* hamburger bars */
html.light .bg-white\/5{background-color:rgba(0,0,0,.05)}
html.light .bg-white\/10{background-color:rgba(0,0,0,.12)}
html.light .hover\:bg-white\/5:hover{background-color:rgba(0,0,0,.05)}
html.light .border-white\/5{border-color:rgba(0,0,0,.08)}
html.light .border-white\/10{border-color:rgba(0,0,0,.12)}
html.light .via-white\/10{--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.14) var(--tw-gradient-via-position),var(--tw-gradient-to)}
html.light .bg-\[\#030303\]{background-color:#eef0f3}   /* footer */

/* Glassmorphism → frosted light cards */
html.light .glass{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.07);box-shadow:0 1px 3px rgba(24,24,27,.05)}
html.light .glass-strong{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.1);box-shadow:0 4px 16px rgba(24,24,27,.08)}

/* Header / preloader / noise */
html.light .hdr-blur{background:rgba(247,247,249,.85);border-bottom-color:rgba(0,0,0,.07)}
html.light .preloader{background:#f7f7f9}
html.light .noise{opacity:.025}

/* Hero decorations */
html.light .hero-grid{background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px)}
html.light .page-hero .hero-grid{background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px)}
html.light .orb{mix-blend-mode:multiply}
html.light .hero-services-tagline .pipe{color:rgba(0,0,0,.25)}

/* Mobile drawer */
html.light .left-drawer{background:#ffffff;border-right-color:rgba(0,0,0,.08)}
html.light .drawer-nav-item{border-bottom-color:rgba(0,0,0,.06)}
html.light .drawer-nav-item a{color:#18181b}
html.light .drawer-nav-item .arrow{color:#a1a1aa}
html.light .drawer-breadcrumb .breadcrumb-current{color:#18181b}
html.light .drawer-breadcrumb .breadcrumb-sep{color:#a1a1aa}

/* Buttons */
html.light .btn-ghost{color:#18181b;border-color:rgba(0,0,0,.22)}
html.light .btn-ghost:hover{border-color:#0fb5ba;color:#0a7d81;background:rgba(15,181,186,.08)}

/* Form fields */
html.light .field{background:#ffffff;border-color:rgba(0,0,0,.12);color:#18181b}
html.light .field::placeholder{color:#a1a1aa}
html.light .field:focus{border-color:#7c3aed}

/* Portfolio filter tabs */
html.light .filter-tab{color:#71717a;border-color:rgba(0,0,0,.12)}
html.light .filter-tab:hover{color:#18181b;border-color:rgba(0,0,0,.28)}
html.light .filter-tab.active{color:#18181b;border-color:rgba(124,58,237,.45)}
html.light .count-badge{background:rgba(124,58,237,.12);color:#6d28d9}

/* Bento overlays sit on imagery — keep their text white in both themes */
html.light .bento-ov{color:#fff}
html.light .bento-ov .text-white{color:#fff}
html.light .bento-ov .text-cyan-300{color:#67e8f9}
html.light .bento-ov .text-violet-300{color:#c4b5fd}
html.light .bento-ov .text-fuchsia-300{color:#f0abfc}
html.light .bento-ov .text-emerald-300{color:#6ee7b7}

/* Video modal stays cinematic-dark in both themes */
html.light .video-modal{background:rgba(10,10,12,.9)}

/* Google Maps embed: undo the dark-mode invert filter in light mode */
html.light iframe[src*="google.com/maps"]{filter:none!important}

/* Work detail: share buttons in light mode */
html.light .share-btn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#3f3f46}
html.light .share-btn:hover{border-color:#0fb5ba;color:#0a7d81;background:rgba(15,181,186,.08)}

/* AEO — FAQ accordion */
.aeo-faq-list{display:flex;flex-direction:column;gap:.75rem}
.aeo-faq-item{border:1px solid rgba(255,255,255,.08);border-radius:1rem;background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .25s}
.aeo-faq-item[open]{border-color:rgba(15,181,186,.25);background:rgba(255,255,255,.04)}
.aeo-faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:600;color:#fff}
.aeo-faq-item summary::-webkit-details-marker{display:none}
.aeo-faq-item summary::after{content:"+";font-size:1.25rem;color:#71717a;flex-shrink:0}
.aeo-faq-item[open] summary::after{content:"−";color:#0fb5ba}
.aeo-faq-q{font-size:.95rem;line-height:1.4}
.aeo-faq-a{padding:0 1.25rem 1.15rem;color:#a1a1aa;font-size:.9rem;line-height:1.65;margin:0}
html.light .aeo-faq-item{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.02)}
html.light .aeo-faq-item[open]{border-color:rgba(15,181,186,.35);background:rgba(15,181,186,.04)}
html.light .aeo-faq-item summary{color:#18181b}
html.light .aeo-faq-a{color:#52525b}