/* ==========================================================================
   Day / night mode — loaded after each page's own styles.
   Night (dark) is the original design. Day mode swaps the tokens on <html
   data-theme="light"> and fixes the few colors that were hardcoded for a dark
   background. Header, mobile menu and footer stay navy in both modes so the
   white-lettered logo keeps working.
   ========================================================================== */

:root{ color-scheme:dark; }

/* ---------- toggle button (lives in the header, which is always dark) ---------- */
.theme-toggle{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:#CBD8E3; cursor:pointer; padding:0; position:relative; overflow:hidden;
  transition:border-color .25s, background .25s, color .25s, transform .25s cubic-bezier(.22,.9,.32,1);
}
.theme-toggle:hover{ border-color:#6FD6F7; color:#fff; background:rgba(35,186,233,0.12); }
.theme-toggle:focus-visible{ outline:2px solid #23BAE9; outline-offset:3px; }
.theme-toggle svg{
  width:18px; height:18px; position:absolute;
  transition:transform .45s cubic-bezier(.22,.9,.32,1), opacity .3s;
}
/* night: show the sun (click → day) · day: show the moon (click → night) */
.theme-toggle .ic-sun{ color:#F3C94B; }
.theme-toggle .ic-moon{ opacity:0; transform:rotate(-90deg) scale(.5); }
[data-theme="light"] .theme-toggle .ic-sun{ opacity:0; transform:rotate(90deg) scale(.5); }
[data-theme="light"] .theme-toggle .ic-moon{ opacity:1; transform:none; }

/* small phones: header holds logo + CTA + toggle + burger */
@media (max-width: 400px){
  .nav-cta{ gap:10px; }
  .nav-cta .btn{ padding:11px 16px; font-size:13px; }
  .theme-toggle{ width:36px; height:36px; }
}

/* header is always solid navy ([data-theme] beats each page's header.nav rule) */
[data-theme] header{
  background:#050B14;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 6px 24px -12px rgba(0,0,0,0.55);
}

/* phones: hide the header CTA next to the burger (it stays inside the mobile menu) */
@media (max-width: 620px){
  .nav-cta > .btn{ display:none; }
}

/* ControlDoc.html header: keep links right-aligned now that the actions group exists */
.nav > .nav-actions{ display:flex; align-items:center; gap:14px; margin-left:26px; }
.nav > nav.links{ margin-left:auto; }

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

/* ============================== DAY MODE ============================== */
[data-theme="light"]{
  color-scheme:light;
  --blue-glow:   #0E7FB0;   /* accent text on light needs a deeper blue */
  --gray:        #5B6674;
  --bg-0:        #F3F6F9;
  --bg-1:        #FFFFFF;
  --bg-2:        #E6EDF3;
  --line:        rgba(14,42,71,0.07);
  --glass:       #FFFFFF;
  --glass-brd:   rgba(14,42,71,0.11);
  --light:       #2A3645;   /* body text */
  --white:       #0E2A47;   /* headings */
  --card-shadow: 0 1px 2px rgba(14,42,71,0.05), 0 12px 32px -18px rgba(14,42,71,0.22);
}

/* header, drawer, the index network hero and footer keep the night tokens */
[data-theme="light"] header,
[data-theme="light"] .mobile-menu,
[data-theme="light"] .cd-hero,
[data-theme="light"] footer{
  color-scheme:dark;
  --blue-glow:#6FD6F7; --gray:#929496;
  --bg-0:#050B14; --bg-1:#0A1626; --bg-2:#10203A;
  --line:rgba(148,197,229,0.14);
  --glass:rgba(255,255,255,0.045); --glass-brd:rgba(255,255,255,0.09);
  --light:#F5F8FA; --white:#ffffff;
}
[data-theme="light"] footer{ background:#050B14; color:var(--gray); margin-top:80px; }

/* ambient background: softer tints */
[data-theme="light"] .bg-grid{
  background-image:
    radial-gradient(circle at 18% 22%, rgba(35,186,233,0.12), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(140,198,79,0.12), transparent 40%),
    radial-gradient(circle at 70% 82%, rgba(0,129,66,0.07), transparent 44%),
    linear-gradient(var(--bg-0), var(--bg-0));
}
[data-theme="light"] .hero-leaf,
[data-theme="light"] .andicom-leaf{ display:none; }

/* ---------- text hardcoded for dark backgrounds ---------- */
[data-theme="light"] :is(
  .v-card h3, .about-list b, .c-card b, .mv-card h3, .tl-item h3,
  .post-card h3, .article-title, .article-body h2, .article-body h3, .article-body strong, .article-body th,
  .sidebar-card h4, .sidebar-post .txt a,
  .cap h4, .pillar h3, .andicom-copy h2, .event-form h3, .event-facts div strong, .contact-item strong
){ color:var(--white); }

[data-theme="light"] :is(
  .page-hero p.lead, .hero p.lead, .mv-card p, .andicom-copy p, .andicom-copy ul li,
  .pillars-grid .pillar:first-child p, .article-body, .article-body td, .article-body blockquote
){ color:var(--light); }

[data-theme="light"] :is(.logo-pill, .chip, .article-tags a, .field label){ color:#46525F; }
[data-theme="light"] .page-hero .breadcrumb span:last-child,
[data-theme="light"] .breadcrumb span[style]{ color:var(--white) !important; }
[data-theme="light"] .page-hero .breadcrumb .sep{ color:rgba(14,42,71,0.3); }
[data-theme="light"] :is(.chip:hover, .pagination a:hover, .article-tags a:hover){ color:var(--white); }
[data-theme="light"] .chip.active{ color:#03121c; }

/* lime green is too light for text on white → use the deep brand green */
[data-theme="light"] :is(
  .kicker, .section-head .kicker, .andicom-copy .kicker, .pillar-tag, .rstat .num span,
  .hero-trust svg, .trust-row svg, .c-card .c-ic svg, .contact-item .ci-icon,
  .cap:nth-child(3n+2) .cap-icon
){ color:var(--green-deep); }
[data-theme="light"] .pillars-grid .pillar:not(:first-child) .pillar-tag{ color:var(--blue-glow); }
[data-theme="light"] .form-success{ color:var(--green-deep); border-color:rgba(0,129,66,0.35); background:rgba(140,198,79,0.14); }

/* ---------- surfaces ---------- */
[data-theme="light"] :is(
  .v-card, .c-card, .post-card, .rstat, .sidebar-card, .cap, .pillar, .contact-strip, .mv-card
){ box-shadow:var(--card-shadow); }
[data-theme="light"] .mv-card{
  background:linear-gradient(150deg, rgba(35,186,233,0.08), rgba(0,129,66,0.07)), #fff;
}
[data-theme="light"] .logo-strip{ background:rgba(255,255,255,0.6); }
[data-theme="light"] .v-ic{ background:rgba(14,42,71,0.05); }
[data-theme="light"] .chip{ background:#fff; }
[data-theme="light"] .blog-search input{ background:#fff; color:var(--white); }
[data-theme="light"] .blog-search input::placeholder{ color:#7C8794; }
[data-theme="light"] .article-body th{ background:rgba(14,42,71,0.05); }
[data-theme="light"] .article-body tr:nth-child(even) td{ background:rgba(14,42,71,0.025); }
[data-theme="light"] .article-cover{ box-shadow:var(--card-shadow); }

/* ControlDoc: event form + fields */
[data-theme="light"] .event-form{
  background:#fff; color:var(--light);
  box-shadow:0 30px 60px -30px rgba(14,42,71,0.35);
}
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea{ background:#F7F9FB; color:var(--white); }
[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus{ background:#fff; }
[data-theme="light"] .app-shell{ box-shadow:0 30px 70px -30px rgba(14,42,71,0.35), 0 0 0 1px var(--glass-brd); }

/* buttons */
[data-theme="light"] .btn-ghost:hover{ background:rgba(35,186,233,0.10); border-color:var(--blue); }
[data-theme="light"] .btn-primary{ box-shadow:0 10px 26px -12px rgba(35,186,233,0.8); }

@media (prefers-reduced-motion: reduce){
  .theme-toggle svg{ transition:none; }
  html.theme-anim, html.theme-anim *{ transition:none !important; }
}