/* =====================================================================
   DFIR TRACE — SHARED THEME SYSTEM
   One source of truth for color, type, spacing and motion across the
   whole site, plus a dark/light toggle and scroll-reveal utility.
   Load this AFTER any page's own inline <style> reference in cascade
   terms is handled by !important on the compatibility layer below —
   pages that adopt the variables directly don't need it.
   ===================================================================== */

:root{
  /* ---- brand palette (dark = default, matches existing hero/prices) ---- */
  --color-bg:        #0a0e1a;
  --color-bg-alt:    #1a1f2e;
  --color-bg-deep:   #050811;
  --color-surface:   rgba(15, 20, 34, 0.92);
  --color-border:    rgba(255, 255, 255, 0.08);

  --color-accent:       #00b8d9;
  --color-accent-light: #00d4ff;
  --color-accent-dim:   rgba(0, 184, 217, 0.15);

  --color-text:        #e8ecf1;
  --color-text-muted:  #9aa5b8;
  --color-text-on-accent: #04121a;

  --gradient-primary: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%);
  --gradient-accent:  linear-gradient(135deg, #00b8d9 0%, #0066cc 100%);

  /* ---- type scale (fluid) ---- */
  --font-heading: 'Barlow', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --fs-h1: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  /* ---- spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---- motion tokens ---- */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  600ms;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 30px rgba(0, 184, 217, 0.25);
}

/* ---- light theme override ---- */
:root[data-theme="light"]{
  --color-bg:        #f7f9fc;
  --color-bg-alt:    #eef1f6;
  --color-bg-deep:   #e4e8f0;
  --color-surface:   #ffffff;
  --color-border:    rgba(10, 14, 26, 0.08);

  --color-accent:       #0090b0;
  --color-accent-light: #00a8c9;
  --color-accent-dim:   rgba(0, 144, 176, 0.10);

  --color-text:        #0a0e1a;
  --color-text-muted:  #55607a;
  --color-text-on-accent: #ffffff;

  --gradient-primary: linear-gradient(135deg, #f7f9fc 0%, #eef1f6 100%);
  --shadow-sm: 0 2px 10px rgba(10,14,26,0.06);
  --shadow-md: 0 10px 30px rgba(10,14,26,0.10);
  --shadow-glow: 0 0 30px rgba(0, 144, 176, 0.18);
}

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* =====================================================================
   Shared component classes — new markup can opt into these directly.
   ===================================================================== */

.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity: 1; transform: none; transition: none; }
}

/* Standardized interactive transitions, applied broadly and safely */
a, button, .btn, input, select, textarea,
.card, [class*="card"], [class*="btn"]{
  transition: color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}

/* ---- theme toggle control (injected by theme.js) ---- */
.theme-toggle{
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 9999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  font-size: 1.25rem;
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
  backdrop-filter: blur(8px);
}
.theme-toggle:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-glow);
}
.theme-toggle:active{ transform: translateY(-1px) scale(0.97); }
.theme-toggle .icon-sun{ display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display: block; }

@media (max-width: 576px){
  .theme-toggle{
    right: var(--space-4);
    bottom: var(--space-4);
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }
}

/* =====================================================================
   Compatibility layer — makes the dark/light toggle visibly work on
   pages that still hardcode their own colors in embedded <style>
   blocks, without having to rewrite every legacy template up front.
   Scoped to light mode only, since dark already matches current design.
   ===================================================================== */
:root[data-theme="light"] body,
:root[data-theme="light"] .index-page,
:root[data-theme="light"] main.main{
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

:root[data-theme="light"] section:not(.theme-fixed-dark),
:root[data-theme="light"] [class*="section"]:not(.section-title):not(.theme-fixed-dark){
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

:root[data-theme="light"] .dark-background:not(.topbar):not(.theme-fixed-dark){
  background: var(--gradient-primary) !important;
  color: var(--color-text) !important;
}
:root[data-theme="light"] .dark-background:not(.topbar):not(.theme-fixed-dark) *{
  color: inherit;
}

/* .theme-fixed-dark marks sections built as permanently-dark showcases
   with their own self-contained color system (the homepage hero's
   cyber-sphere visual, the services section's own --bg-dark palette,
   and similar) — their hardcoded light text/borders assume a dark
   backdrop, so inverting the section would leave that text unreadable.
   The topbar is the same idea but keyed off its own class since it
   isn't a <section>. All three stay dark in both themes rather than
   following the toggle like the rest of the page.

   Some marked sections (prices.html's hero/showcase/contact blocks)
   reference var(--gradient-primary) directly in their OWN embedded
   CSS rather than through this compatibility layer — excluding them
   from the rules above isn't enough, because the variable itself
   still flips value in light mode. This rule repaints them with a
   literal, dark gradient in light mode only, so their light-mode look
   matches their own (already-correct) dark-mode look exactly — dark
   mode itself is untouched, so sections with their own slightly
   different dark gradient (services, hero) keep their original values. */
:root[data-theme="light"] .theme-fixed-dark{
  background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%) !important;
  color: #e8ecf1 !important;
}
/* Plain cascade (no !important): only reaches descendants that don't
   already set their own color, since the section's own embedded CSS
   loads after theme.css and wins on equal specificity either way. */
:root[data-theme="light"] .theme-fixed-dark *{
  color: inherit;
}

:root[data-theme="light"] [style*="background-color: #0a0e1a"],
:root[data-theme="light"] [style*="background:#0a0e1a"]{
  background-color: var(--color-bg) !important;
}

:root[data-theme="light"] .card,
:root[data-theme="light"] [class*="card"],
:root[data-theme="light"] .modal-content{
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Text color is only ever repainted alongside its own background rule
   above (body/main/section/card/footer) so we never end up with
   light-mode text color sitting on an untouched dark background. */
:root[data-theme="light"] .footer,
:root[data-theme="light"] footer{
  background-color: var(--color-bg-deep) !important;
  color: var(--color-text) !important;
}
:root[data-theme="light"] .footer a,
:root[data-theme="light"] footer a{ color: var(--color-accent); }

/* =====================================================================
   Dropdown / megamenu popovers — themed in both modes (Bootstrap's
   default white popup otherwise looks disconnected from the rest of
   the page in dark mode, and is a light-mode contrast risk too).
   ===================================================================== */
.dropdown-menu,
.desktop-megamenu,
.megamenu-section{
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dropdown-menu .dropdown-item,
.dropdown-menu a,
.desktop-megamenu a,
.megamenu-section a{
  color: var(--color-text) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.desktop-megamenu a:hover{
  background-color: var(--color-accent-dim) !important;
  color: var(--color-accent-light) !important;
}
.dropdown-divider{ border-color: var(--color-border) !important; }