/* Light version of the Sipnomy theme (the live theme).
   Applied with <body class="theme-light">. The dark sections' colour variables are
   redefined to light values, then the few places that use fixed colours are adjusted. */

.theme-light {
  --night: #f6f5f1;
  --night-2: #ffffff;
  --night-3: #efece5;
  --night-line: rgba(14, 19, 32, 0.08);
  --night-line-2: rgba(14, 19, 32, 0.16);
  --on-night: #0e1320;
  --on-night-2: #454d5e;
  --on-night-3: #646c7e;
  --olive: #4d7a0e;

  /* chart colours read by home.js */
  --viz-ink: #0e1320;
  --viz-muted: #9aa1ae;
  --viz-accent: #5a8a10;
  --viz-accent-fill: #a6d62c;
  --viz-grid: rgba(14, 19, 32, 0.16);
  --viz-axis: #6b7385;
  --viz-cross: rgba(14, 19, 32, 0.35);
  --viz-dot-fill: #ffffff;
  --rm-icon-strong: #0e1320;
  --rm-icon-weak: #4d7a0e;
  background: var(--paper);
}

/* header */
.theme-light .site-header { background: rgba(246, 245, 241, 0.86); border-bottom-color: var(--line); color: var(--ink); }
.theme-light .logo { color: var(--ink); }
.theme-light .logo-mark circle:first-child, .theme-light .logo-mark path { stroke: var(--olive); }
.theme-light .logo-mark circle:last-child { fill: var(--olive); }
.theme-light .nav-links a { color: var(--ink-2); }
.theme-light .nav-links a:hover { color: var(--ink); background: rgba(14, 19, 32, 0.05); }
.theme-light .nav-links a[aria-current="page"] { color: var(--ink); background: rgba(14, 19, 32, 0.07); }
/* citrus buttons keep dark text (the base theme uses --night for it, which is paper here) */
.theme-light .btn-citrus, .theme-light .btn-citrus:hover,
.theme-light .nav-links .nav-cta a, .theme-light .nav-links .nav-cta a:hover { color: #090c13; }
/* "Talk to us" stays citrus, including on the Contact page itself */
.theme-light .nav-links .nav-cta a, .theme-light .nav-links .nav-cta a[aria-current="page"] { background: var(--citrus); }
.theme-light .nav-links .nav-cta a:hover { background: #d8f77f; }
.theme-light .nav-toggle { color: var(--ink); border-color: var(--line-strong); }
@media (max-width: 860px) { .theme-light .nav-links { background: rgba(246, 245, 241, 0.98); border-bottom-color: var(--line); } }

/* section rhythm: alternate paper and white so neighbouring sections stay distinct */
.theme-light .hero, .theme-light .page-hero { background: radial-gradient(ellipse 70% 60% at 85% 0%, rgba(201, 242, 93, 0.28), transparent 70%), var(--paper); }
.theme-light .page-hero { border-bottom: 1px solid var(--line); }
.theme-light #how { background: #ffffff; }
.theme-light .grid-bg::before { opacity: 0.8; }
.theme-light .glow::after { background: radial-gradient(closest-side, rgba(201, 242, 93, 0.3), transparent 70%); }
.theme-light .final-cta { background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(201, 242, 93, 0.45), transparent 70%), var(--paper); }
.theme-light main > section.dark.grid-bg:not(.hero):not(.page-hero) { background: #ffffff; }

/* the citrus italic becomes a highlighter stroke */
.theme-light .hero h1 .serif, .theme-light .page-hero h1 .serif {
  color: var(--ink) !important;
  background: linear-gradient(transparent 60%, rgba(201, 242, 93, 0.85) 60%, rgba(201, 242, 93, 0.85) 90%, transparent 90%);
  padding: 0 0.06em;
}

/* hero cards */
.theme-light .path { background: #ffffff; border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(14, 19, 32, 0.03), 0 24px 50px -34px rgba(14, 19, 32, 0.35); }
.theme-light .path-service { border-color: rgba(110, 160, 20, 0.55); box-shadow: 0 0 0 1px rgba(201, 242, 93, 0.45), 0 30px 70px -40px rgba(110, 160, 20, 0.55); }
.theme-light .chip { border-color: var(--line-strong); color: var(--ink-2); }
.theme-light .chip.citrus { border-color: rgba(110, 160, 20, 0.6); color: #3d5a0c; background: rgba(201, 242, 93, 0.28); }
.theme-light .demo-widget { background: var(--paper); border-color: var(--line); }
.theme-light .demo-slider output { color: var(--olive); }
.theme-light input[type="range"]::-webkit-slider-thumb { border-color: #ffffff; box-shadow: 0 0 0 1px var(--olive); }
.theme-light .range-map .rm-cell { fill: rgba(14, 19, 32, 0.025); stroke: var(--line); }
.theme-light .range-map .rm-link { stroke: #6f9e14; }
.theme-light .range-status .dot { background: #8fc21f; }

/* moving parts chart */
.theme-light .decomp-card { background: #ffffff; border-color: var(--line); box-shadow: 0 24px 50px -38px rgba(14, 19, 32, 0.35); }
.theme-light .decomp-step.price.on { border-color: #8fc21f; }
.theme-light .decomp-step.price.on b { color: var(--olive); }
.theme-light .decomp-chart .dc-stat.price { fill: var(--olive); }
.theme-light .decomp-tip { background: #ffffff; border-color: var(--line-strong); color: var(--ink); box-shadow: 0 16px 40px -18px rgba(14, 19, 32, 0.35); }
.theme-light .decomp-tip .t-row.price strong { color: var(--olive); }

/* trust section and buttons */
.theme-light .check-item .ck { color: var(--olive); }
.theme-light .dark .btn-ghost { color: var(--ink); border-color: var(--line-strong); }
.theme-light .dark .btn-ghost:hover { border-color: var(--ink); }
.theme-light :focus-visible { outline-color: var(--ink); }

/* page-hero summary cards (service, contact) and the calculator's demo note */
.theme-light .facts { background: #ffffff; border-color: var(--line); box-shadow: 0 24px 50px -36px rgba(14, 19, 32, 0.35); }
.theme-light .demo-banner { background: #ffffff; border-color: rgba(110, 160, 20, 0.55); box-shadow: 0 0 0 1px rgba(201, 242, 93, 0.35), 0 26px 60px -40px rgba(110, 160, 20, 0.5); }
.theme-light .next-steps li::before { color: var(--olive); }

/* panels that stay dark inside the light theme: their colour variables go back to the dark values */
.theme-light .headline, .theme-light .report-cta, .theme-light .aside-card {
  --night: #090c13;
  --night-line: rgba(255, 255, 255, 0.09);
  --night-line-2: rgba(255, 255, 255, 0.16);
  --on-night: #eef1f7;
  --on-night-2: #b3bbcc;
  --on-night-3: #8790a3;
}
.theme-light .report-cta .chip.citrus { color: var(--citrus); background: transparent; border-color: rgba(201, 242, 93, 0.5); }
.theme-light .report-cta :focus-visible, .theme-light .aside-card :focus-visible { outline-color: var(--citrus); }

/* footer */
.theme-light .site-footer { background: #ffffff; border-top-color: var(--line); }

/* bubbles: glossy lime everywhere */
.theme-light .bubbles {
  --bubble-rim: rgba(61, 90, 12, 0.32);
  --bubble-bg: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 14%, rgba(201, 242, 93, 0.3) 46%, transparent 74%);
  --fizz: rgba(95, 135, 20, 0.45);
}