/* =========================================================
   TechForge Command — Day / Night Theme Switcher
   Light theme + animated sun/moon icon
   v1.0.0
   ========================================================= */

/* ── Smooth theme transition ─────────────────────────────── */
/* Applied to key containers so the switch feels polished,   */
/* not instant — roughly 0.6 s cross-fade.                   */
body,
#site-header,
.service-card,
.service-card::after,
.testimonial-card,
.why-visual,
.contact-form-wrap,
#site-footer,
.tf-form input,
.tf-form select,
.tf-form textarea,
.tfc-chat-panel,
.tfc-chat-header,
.tfc-msg-bubble,
.tfc-chat-input {
  transition:
    background-color 0.65s ease,
    color            0.45s ease,
    border-color     0.45s ease,
    box-shadow       0.45s ease !important;
}


/* ─────────────────────────────────────────────────────────
   ICON CONTAINER
   Sits in the header-brand flex group (left of the logo).
───────────────────────────────────────────────────────── */
.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

#tfc-theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}


/* ── Sun — slowly spinning rays ──────────────────────────── */
@keyframes tfc-sun-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#tfc-theme-icon .tfc-sun-rays {
  animation: tfc-sun-spin 16s linear infinite;
  transform-origin: 18px 18px;  /* centre of the 36×36 viewBox */
}


/* ── Stars — independent twinkling ──────────────────────── */
@keyframes tfc-twinkle {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.08; }
}
#tfc-theme-icon .tfc-s1 { animation: tfc-twinkle 2.5s ease-in-out infinite; }
#tfc-theme-icon .tfc-s2 { animation: tfc-twinkle 3.3s ease-in-out infinite 0.9s; }
#tfc-theme-icon .tfc-s3 { animation: tfc-twinkle 1.9s ease-in-out infinite 1.7s; }


/* =========================================================
   LIGHT THEME  —  body.tfc-day-mode
   The dark theme remains the default (no class needed).
   Almost everything in the site uses CSS custom properties,
   so overriding :root variables here covers ~90 % of the
   job.  The handful of hardcoded rgba() values below cover
   the rest.
   ========================================================= */
body.tfc-day-mode {
  /* Backgrounds — cool blue-gray tech palette */
  --tf-bg:    #f0f4fa;
  --tf-bg2:   #e6ecf8;
  --tf-bg3:   #dae3f5;
  --tf-bg4:   #cfd9ee;

  /* Text */
  --tf-text:  #1a2540;
  --tf-muted: #4d5e80;

  /* Heading "white" — inverted to near-black so headings are readable */
  --tf-white: #1a2540;

  /* Borders */
  --tf-border: #bfcde8;
}

/* ── Header ──────────────────────────────────────────────── */
body.tfc-day-mode #site-header {
  background: rgba(240, 244, 250, 0.90);
  border-bottom-color: rgba(191, 205, 232, 0.70);
}
body.tfc-day-mode #site-header.scrolled {
  background: rgba(240, 244, 250, 0.98);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── Logo — remove white-invert filter ───────────────────── */
body.tfc-day-mode .site-logo img,
body.tfc-day-mode .site-logo .custom-logo,
body.tfc-day-mode .site-logo .custom-logo-link img {
  filter: none !important;
}
body.tfc-day-mode .footer-brand img,
body.tfc-day-mode .footer-brand .custom-logo,
body.tfc-day-mode .footer-brand .custom-logo-link img {
  filter: none !important;
}

/* ── Nav — keep button text white (white on orange is fine) ─ */
body.tfc-day-mode .nav-cta { color: #fff !important; }
body.tfc-day-mode #primary-nav a { color: var(--tf-text); }
body.tfc-day-mode .nav-toggle     { color: var(--tf-text); }


/* ── Hero — lighten the dark overlay ────────────────────── */
body.tfc-day-mode #hero {
  background-image:
    linear-gradient(
      135deg,
      rgba(240, 244, 250, 0.84) 0%,
      rgba(230, 238, 252, 0.70) 50%,
      rgba(255, 236, 210, 0.76) 100%
    ),
    url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1920&q=80');
}

body.tfc-day-mode #hero h1 {
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.45);
}
body.tfc-day-mode .hero-sub {
  color: rgba(26, 37, 64, 0.76);
  text-shadow: none;
}
body.tfc-day-mode .hero-stats {
  border-top-color: rgba(0, 0, 0, 0.11);
}
body.tfc-day-mode .stat-item + .stat-item {
  border-left-color: rgba(0, 0, 0, 0.11);
}
body.tfc-day-mode .stat-item .stat-label {
  color: rgba(26, 37, 64, 0.52);
}
body.tfc-day-mode .hero-scroll {
  color: rgba(0, 0, 0, 0.22);
}
body.tfc-day-mode .hero-scroll svg {
  stroke: rgba(249, 115, 22, 0.4);
}


/* ── Buttons ─────────────────────────────────────────────── */
body.tfc-day-mode .btn-primary        { color: #fff; }
body.tfc-day-mode .tf-form .btn-submit { color: #fff; }

body.tfc-day-mode .btn-outline {
  background:    rgba(0, 0, 0, 0.05);
  border-color:  rgba(0, 0, 0, 0.16);
  color:         var(--tf-text);
  backdrop-filter: none;
}
body.tfc-day-mode .btn-outline:hover {
  color:        var(--tf-orange-dark);
  background:   rgba(249, 115, 22, 0.07);
  border-color: var(--tf-orange-border);
}


/* ── Form fields ─────────────────────────────────────────── */
body.tfc-day-mode .tf-form input::placeholder,
body.tfc-day-mode .tf-form textarea::placeholder {
  color: #8d9ab8;
}

/* ── Form notices — better contrast on light bg ─────────── */
body.tfc-day-mode .tf-notice.success {
  background: rgba(22, 163, 74, 0.09);
  border-color: rgba(22, 163, 74, 0.28);
  color: #15803d;
}
body.tfc-day-mode .tf-notice.error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: #b91c1c;
}


/* ── AI Chat widget ──────────────────────────────────────── */
/* The floating bubble stays dark on any page to stay visible */
/* but the panel interior adapts to the day palette.         */
body.tfc-day-mode #tfc-chat-panel {
  background: var(--tf-bg2) !important;
  border: 1px solid var(--tf-border) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
}
body.tfc-day-mode .tfc-chat-header {
  background: var(--tf-bg3) !important;
  border-bottom: 1px solid var(--tf-border) !important;
}
body.tfc-day-mode .tfc-chat-footer {
  background: var(--tf-bg2) !important;
  color: var(--tf-muted) !important;
  border-top: 1px solid var(--tf-border) !important;
}
body.tfc-day-mode .tfc-contact-hint a {
  color: var(--tf-orange-dark) !important;
}
body.tfc-day-mode .tfc-msg.assistant .tfc-msg-bubble {
  background: var(--tf-bg3) !important;
  color: var(--tf-text) !important;
}
body.tfc-day-mode #tfc-chat-input {
  background: var(--tf-bg) !important;
  border-color: var(--tf-border) !important;
  color: var(--tf-text) !important;
}
body.tfc-day-mode #tfc-chat-input::placeholder { color: #8d9ab8 !important; }
body.tfc-day-mode .tfc-chat-input-area {
  background: var(--tf-bg2) !important;
  border-top: 1px solid var(--tf-border) !important;
}
body.tfc-day-mode .tfc-ai-name  { color: var(--tf-text) !important; }
body.tfc-day-mode .tfc-ai-status { color: var(--tf-muted) !important; }


/* ── Anti-FOUC: html gets tfc-day-pre before body renders ── */
/* The tiny inline script in <head> adds this class           */
/* immediately so the page background is correct before       */
/* the stylesheet & main JS have finished loading.            */
html.tfc-day-pre {
  background: #f0f4fa;
}
html.tfc-day-pre body {
  background-color: #f0f4fa;
  color: #1a2540;
}