/* Aeline template dark mode (HVO addition, 2026-07-14).
   The template routes nearly all color through Webflow-style semantic
   variables (--bg-color--*, --text-color--*, built on a grey ramp), so
   dark mode = re-pointing the semantic layer under html[data-theme=dark].
   The toggle + persistence live in dark.js. */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — three distinct levels so cards separate from the page
     (Mena 2026-07-14 round 2: flat cards read as holes; round 3: warm
     greys read as dark yellow — use TRUE NEUTRAL greys):
     page #131313 → section container #1a1a1a → elevated card #232323 */
  --bg-color--bg-default: var(--grey--grey-900);
  --bg-color--bg-white: #232323;
  --bg-color--bg-primary: #1a1a1a;
  --bg-color--bg-subtle: #232323;
  --bg-color--bg-secondary: var(--grey--grey-700);

  /* Text */
  --text-color--text-primary: var(--base--white);
  --text-color--text-secondary: var(--grey--grey-300);

  /* Light end of the grey ramp — some sections reference these directly
     as backgrounds (e.g. .h-about_content), bypassing the semantic layer.
     Audited 2026-07-14: grey-100/200 are used as backgrounds only, never
     as text color, so remapping them is safe. */
  --grey--grey-100: #1a1a1a;
  --grey--grey-200: #2a2a2a;

  /* Borders */
  --border-color--border-primary\<deleted\|variable-d4c54ba4-ee41-67ce-58a5-5216ca039f83\>: var(--grey--grey-700);
  --text-color--text-subtle\<deleted\|variable-1da72c9f-5ac1-a5ce-af72-d34835774f2f\>: var(--grey--grey-600);
}

/* Page-level backstop: some rules use white/#fafafa directly. */
html[data-theme="dark"] body {
  background-color: var(--grey--grey-900);
  color: var(--base--white);
}

/* Lime (.bg-green) surfaces keep dark text — the accent color stays
   light in both themes, so white text on it would be unreadable. */
html[data-theme="dark"] .bg-green,
html[data-theme="dark"] .bg-green *,
html[data-theme="dark"] .pricing_card.is-top,
html[data-theme="dark"] .pricing_card.is-top * {
  color: var(--grey--grey-900);
}

/* …but dark buttons sitting ON a lime surface keep their light label */
html[data-theme="dark"] .bg-green .button,
html[data-theme="dark"] .bg-green .button *,
html[data-theme="dark"] .pricing_card.is-top .button,
html[data-theme="dark"] .pricing_card.is-top .button * {
  color: var(--base--white);
}

/* Contact form card: its white surface remaps to grey-900 = same as the
   page, so the card silhouette vanishes. Lift it one step. */
html[data-theme="dark"] .hero-contact_form {
  background-color: #232323;
}

/* Card separation: hairline edge on every real content card so surfaces
   read as cards, not holes. Inset box-shadow = no layout shift. The
   featured lime pricing card is excluded (edge on lime is noise). */
html[data-theme="dark"] .services_card,
html[data-theme="dark"] .expertise_card,
html[data-theme="dark"] .pricing_card:not(.is-top),
html[data-theme="dark"] .card_about,
html[data-theme="dark"] .about_card-float,
html[data-theme="dark"] .team_card,
html[data-theme="dark"] .hero-contact_form {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Intentionally-black cards (bg-black stat card, floating about card):
   lift to the elevated-surface tone so they separate from the page. */
html[data-theme="dark"] .card_about.bg-black,
html[data-theme="dark"] .about_card-float {
  background-color: #232323;
}

/* Dark mock-UI prop cards (originally black in light mode too — pcard
   "Performance", ecard "Expertise", scard "+5,000 customers"): keep the
   black-card look but define their edges against dark sections. */
html[data-theme="dark"] .pcard,
html[data-theme="dark"] .ecard,
html[data-theme="dark"] .scard {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Light mock-UI prop cards (originally WHITE in light mode — the
   .vcard "Monthly expanse" fake app screenshots, injected by the kept
   rollback tile scripts): they stay light in both themes. Re-declaring
   the remapped vars on the subtree restores every inner use (chart
   bars, labels, rows) in one shot. */
html[data-theme="dark"] .vcard {
  --grey--grey-100: #f2f2f2;
  --grey--grey-200: #ececec;
  --text-color--text-primary: var(--base--black);
  --text-color--text-secondary: var(--grey--grey-400);
  --bg-color--bg-white: var(--base--white);
  --bg-color--bg-subtle: #f2f2f2;
  background-color: var(--base--white);
}

/* Team cards: the template's GSAP script bakes the light bg-secondary
   value as an INLINE style at load, which outranks any stylesheet —
   !important is required to win in dark mode. */
html[data-theme="dark"] .team_card {
  background-color: #232323 !important;
}

/* Photographic imagery: ease the brightness so photos don't glare
   against dark surfaces (hero sky, team shots, blog covers). */
html[data-theme="dark"] img:not(.sk8-logo img):not(.theme-toggle img) {
  filter: brightness(0.88);
}

/* Preloader follows the theme: dark curtain, light word, logo inverted
   (the logo SVGs are solid black; invert = the Portal's white variant). */
html[data-theme="dark"] #sk8-preloader {
  background: var(--grey--grey-900);
}
html[data-theme="dark"] #sk8-preloader .sk8-word {
  color: var(--base--white);
}
html[data-theme="dark"] #sk8-preloader svg path {
  fill: var(--grey--grey-900);
}
html[data-theme="dark"] #sk8-preloader .sk8-logo img {
  filter: invert(1);
}

/* ---- Smooth theme switching (Mena 2026-07-14) ---- */

/* Dark twins of theme-aware images (built by dark.js from
   img[data-dark-src]) crossfade over their light originals. Always-on
   transition; !important survives the global fade rule below. */
.hvo-img-dark {
  opacity: 0;
  transition: opacity 0.6s ease !important;
}

/* Dark hero crop note (2026-08-28): the current photo
   (crescent-moon-hero-dark.webp?v=3, Mena's edit with the moon and star
   removed) is a plain dusk-sky gradient, so the DEFAULT centered
   object-fit:cover crop is right and no override is needed. Earlier
   moon-bearing versions needed `.img.is-hero.hvo-img-dark
   { object-position: 12% 50%; }` to keep the left-edge moon in frame —
   re-add a rule like that (scoped to the dark twin only) and bump this
   file's ?v= stamp if a future photo puts its subject near an edge. */
html[data-theme="dark"] .hvo-img-dark {
  opacity: 1;
}

/* During a toggle, everything fades its colors instead of snapping.
   The .theme-fade class is added by dark.js for ~600ms around a user
   toggle only (never at page load, so no flash). Opacity is NOT in the
   list — entrance animations and the image crossfade own opacity. */
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition:
    background-color 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    fill 0.45s ease,
    filter 0.45s ease;
}

/* ---- Theme toggle button (injected by dark.js on every page) ---- */
.theme-toggle {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 950; /* under the navbar (999) so menus stay on top */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: #fff;
  color: #131313;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover {
  transform: scale(1.08);
}
html[data-theme="dark"] .theme-toggle {
  background: #232323;
  border-color: var(--grey--grey-600);
  color: #fff;
}
.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}
/* Show the icon of the mode you'd switch TO */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ---- Primary black CTAs invert in dark (Mena 2026-07-14 round 3) ----
   Light mode: black pill + lime text + lime arrow-circle, on light
   sections. On a dark page the black pill vanishes and the CTA reads as
   a bare text link. Invert to lime pill + dark text + black circle —
   the same look as the hero's lime GET STARTED. */
html[data-theme="dark"] .button-arrow.is-black,
html[data-theme="dark"] .button[class*="w-variant-e7c0edd3"] {
  background-color: var(--base--green);
}
html[data-theme="dark"] .button-arrow.is-black,
html[data-theme="dark"] .button-arrow.is-black .button-arrow_text,
html[data-theme="dark"] .button-arrow.is-black .text_button,
html[data-theme="dark"] .button[class*="w-variant-e7c0edd3"],
html[data-theme="dark"] .button[class*="w-variant-e7c0edd3"] * {
  color: var(--grey--grey-900);
}
/* Arrow circle flips lime→black (SVG arrow uses currentColor) */
html[data-theme="dark"] .button_container-arrow.is-black {
  background-color: var(--grey--grey-900);
  color: var(--base--green);
}
/* Hover-fill layer flips lime→black; hover text goes lime over it
   (the template's own hover rule would set it to bg-dark = invisible) */
html[data-theme="dark"] .button-arrow.is-black .button-arrow_bg.is-black {
  background-color: var(--grey--grey-900);
}
html[data-theme="dark"] .button-arrow.is-black:hover,
html[data-theme="dark"] .button-arrow.is-black:hover .button-arrow_text,
html[data-theme="dark"] .button-arrow.is-black:hover .text_button {
  color: var(--base--green);
}
/* Exception: the black CTA ON the lime pricing card already contrasts —
   keep it a black pill with a light label (declared last so it wins). */
html[data-theme="dark"] .pricing_card.is-top .button[class*="w-variant-e7c0edd3"],
html[data-theme="dark"] .bg-green .button[class*="w-variant-e7c0edd3"] {
  background-color: var(--grey--grey-900);
}
html[data-theme="dark"] .pricing_card.is-top .button[class*="w-variant-e7c0edd3"],
html[data-theme="dark"] .pricing_card.is-top .button[class*="w-variant-e7c0edd3"] *,
html[data-theme="dark"] .bg-green .button[class*="w-variant-e7c0edd3"],
html[data-theme="dark"] .bg-green .button[class*="w-variant-e7c0edd3"] * {
  color: var(--base--white);
}


/* ---- Three controls that never adapted (2026-08-24, Mena) ----------------
   ROOT CAUSE, since this keeps recurring: dark mode here works by
   re-pointing the template's SEMANTIC variables (--bg-color--*, --text-color--*
   at the top of this file). Anything painted through that layer adapts for
   free. These three bypass it, each in a different way, so no amount of
   variable re-pointing could ever have reached them:

     1. CONTACT US hardcodes a literal translucent tint
        (rgba(18,40,53,.25) + white text) — identical in BOTH themes,
        because the Aeline hero was authored dark-only and it only ever had
        to work on one background.
     2. The hero GET STARTED arrow DOES have dark rules above, but they are
        written for the `.is-black` variant. The hero button is plain
        `.button-arrow`, so it falls through and keeps a near-black arrow
        (#232323) on a near-black circle.
     3. The hamburger paints via its own private pair,
        `var(--navbar-menu-bg, #101604)` / `var(--navbar-menu-fg, #fff)`,
        which nothing in dark mode ever set.

   Fixes below use the template's OWN hooks rather than new literals. */

/* 1. CONTACT US → white pill, dark label (matches the LOGIN/GET STARTED
      weight so the pair reads as one row) */
html[data-theme="dark"] .button[class*="w-variant-3876fb3c"] {
  background-color: var(--base--white);
}
html[data-theme="dark"] .button[class*="w-variant-3876fb3c"],
html[data-theme="dark"] .button[class*="w-variant-3876fb3c"] * {
  color: var(--grey--grey-900);
}

/* 2. Hero GET STARTED arrow → white. The SVG uses currentColor, so this is a
      `color` flip on the circle. `:not(.is-black)` keeps the existing
      is-black rules above untouched. */
html[data-theme="dark"] .button-arrow:not(.is-black) .button_container-arrow:not(.is-black) {
  color: var(--base--white);
}

/* 3. Hamburger → white with dark text in dark mode, closed AND open
      (Mena 2026-08-31: the open panel was still a dark card on the dark
      page, near-zero separation). Originally gated to the closed state
      on the fear that whitening the panel would hide its white text, but
      every panel element (MENU label, links, toggle bars) paints via
      --navbar-menu-fg, so flipping BOTH variables inverts the whole card
      cleanly; the lime accent dot/arrow (--navbar-accent) reads fine on
      white. Drop the [data-navigation-status] gate entirely. */
html[data-theme="dark"] .hamburger-nav {
  --navbar-menu-bg: var(--base--white);
  --navbar-menu-fg: var(--grey--grey-900);
}