/* nexusbiz.tech — the light theme.
 *
 * On when <html> has data-theme="light": the nav's theme button sets it and
 * saves the choice (site/site.js, "Theme and language"), and a script in
 * <head> restores it before first paint (scripts/prefs.mjs). Without the
 * attribute the page is dark, as designed; every rule here is scoped to the
 * attribute, so this file changes nothing in the dark theme.
 *
 * Most of the page is the Ultra Glow kit's tokens, so the theme is first those
 * tokens redefined for a light page: white glass, slate ink, the title
 * gradient deepened until it reads on white, shadows in place of neon glows.
 * Then the places that hard-code a dark-page colour (the export's inline
 * styles, a few skin rules), each restated for light under its section.
 */

/* ---------------------------------------------------------------- tokens */
:root[data-theme='light'] {
  color-scheme: light;

  --ug-page: #f8fafc;
  --ug-surface: #ffffff;
  --ug-surface-2: #f1f5f9;
  --ug-surface-3: #e2e8f0;
  --ug-glass: rgb(255 255 255 / 0.84);
  --ug-glass-sheen: linear-gradient(155deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.2) 40%, transparent 65%);
  --ug-glass-panel: rgb(15 23 42 / 0.035);
  --ug-glass-chrome: rgb(255 255 255 / 0.84);
  --ug-glass-capsule: rgb(255 255 255 / 0.8);

  --ug-text: #0f172a;
  --ug-text-strong: #020617;
  --ug-text-muted: #475569;
  --ug-text-label: #475569;
  --ug-text-head: #334155;

  --ug-line: rgb(79 70 229 / 0.16);
  --ug-hairline: rgb(79 70 229 / 0.1);
  --ug-track: rgb(79 70 229 / 0.12);
  --ug-edge: rgb(79 70 229 / 0.26);

  /* The title gradient, cyan to violet to magenta as in the dark theme, each
     stop taken down to its 700 shade so it reads on white. */
  --ug-title-fill: linear-gradient(90deg, #0e7490 0, #5b21b6 7em, #a21caf 14em, #a21caf);
  --ug-page-title-fill: linear-gradient(90deg, #0e7490 0, #5b21b6 6em, #a21caf 12em, #a21caf);
  --ug-title-glow: none;
  --ug-page-title-glow: none;
  --ug-value-glow: none;

  --ug-card-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 14px 32px -16px rgb(15 23 42 / 0.2), 0 0 32px -14px rgb(99 102 241 / 0.28);
  --ug-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 6px 14px -8px rgb(15 23 42 / 0.2);
  --ug-float-shadow: 0 2px 6px rgb(15 23 42 / 0.06), 0 24px 48px -20px rgb(15 23 42 / 0.3);
  --ug-focus-ring: 0 0 0 3px rgb(14 116 144 / 0.22);

  /* The body's dark text halo kept text legible over the aurora; on a light
     page it would be a smudge. */
  --ug-halo: none;

  --nx-accent: #0e7490;
  --nx-cyan-ink: #0e7490;
  --nx-lavender: #6d28d9;
  --nx-title-halo: none;
}

/* ---------------------------------------------------------------- page background
   The Background Boxes grid on a light page: the same lines and plus signs
   (background-boxes.css) in a pale slate, under the page colour's vignette. */
:root[data-theme='light'] .bgb-lines {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Crect width='64' height='1' fill='%23d5dde8'/%3E%3Crect x='63' width='1' height='32' fill='%23d5dde8'/%3E%3C/svg%3E");
}
:root[data-theme='light'] .bgb-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64'%3E%3Cpath d='M20 6v12m6-6H14' fill='none' stroke='%23d5dde8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- nav
   overrides.css lights the items lavender and the current one cyan with a
   glow; on white glass they take slate ink and a cyan-700 current item. */
:root[data-theme='light'] nav[data-nx-nav] > div {
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 18px 40px -20px rgb(15 23 42 / 0.35), 0 0 24px -10px rgb(139 92 246 / 0.35) !important;
}
:root[data-theme='light'] nav[data-nx-nav] [data-nav-item] { color: #475569 !important; }
:root[data-theme='light'] nav[data-nx-nav] [data-nav-item]:hover { color: #0f172a !important; }
:root[data-theme='light'] nav[data-nx-nav] [data-nav-item][aria-current='page'] {
  color: #0e7490 !important;
  text-shadow: none;
}
:root[data-theme='light'] nav[data-nx-nav] [data-nav-item][aria-current='page'] svg { filter: none; }
:root[data-theme='light'] nav[data-nx-nav] [data-nav-indicator] {
  background: linear-gradient(90deg, rgb(14 116 144 / 0.12), rgb(109 40 217 / 0.08) 70%, rgb(109 40 217 / 0.04)) !important;
  box-shadow: inset 0 0 0 1px rgb(14 116 144 / 0.25);
}
:root[data-theme='light'] [data-nx-prefs] > a,
:root[data-theme='light'] [data-nx-prefs] > button {
  background: rgb(15 23 42 / 0.03);
  color: #475569;
}
:root[data-theme='light'] [data-nx-prefs] > a:hover,
:root[data-theme='light'] [data-nx-prefs] > button:hover {
  color: #0f172a;
  background: rgb(15 23 42 / 0.06);
  border-color: rgb(14 116 144 / 0.5);
}

/* ---------------------------------------------------------------- hero */
:root[data-theme='light'] [data-nx-hero-eyebrow] { text-shadow: none; }
:root[data-theme='light'] [data-nx-hero-note] { color: #475569 !important; }

/* ---------------------------------------------------------------- All Applications
   The cards are already Task Job's white tiles; the lede under the title is
   the dark page's pale ink in apps.css. */
:root[data-theme='light'] .ap-lede { color: #475569; }

/* ---------------------------------------------------------------- features */
:root[data-theme='light'] #features h2 + p { color: #475569 !important; }
:root[data-theme='light'] [data-nx-feat-rim] { background: radial-gradient(ellipse at center, #e0e7ff 0%, #c7d2fe 70%); }
:root[data-theme='light'] [data-nx-feat-base] { background: linear-gradient(to top, #a5b4fc, #e0e7ff); }

/* ---------------------------------------------------------------- services
   The strip's lavender icons and the two halves of "Our Services", each
   gradient taken down to its 700 shades. */
:root[data-theme='light'] #services { color: rgb(91 33 182 / 0.75) !important; }
:root[data-theme='light'] #services > div:first-child svg { filter: none; }
:root[data-theme='light'] [data-nx-services-title] > span:first-of-type { background-image: linear-gradient(90deg, #0e7490, #1d4ed8); }
:root[data-theme='light'] [data-nx-services-title] > span:last-of-type { background-image: linear-gradient(90deg, #6d28d9, #a21caf); }
:root[data-theme='light'] [data-nx-services-title] > svg { color: #4f46e5; filter: none; }
/* The modules' code squares: a pale tint of the module's neon, the code in a
   dark twin of it. */
:root[data-theme='light'] [data-nx-badge] {
  background-color: color-mix(in oklab, var(--nx-tone) 14%, white);
  color: color-mix(in oklab, var(--nx-tone) 70%, black);
  box-shadow: none;
}

/* ---------------------------------------------------------------- Task Job */
:root[data-theme='light'] [data-nx-tj-entry] code { background: #f1f5f9; color: #0e7490; }
:root[data-theme='light'] [data-nx-deck] .cd-meta {
  background: rgb(255 255 255 / 0.88);
  box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.18), var(--ug-shadow-sm);
}

/* ---------------------------------------------------------------- SaleGrowth */
:root[data-theme='light'] .fh-lede { color: #334155 !important; text-shadow: none !important; }

/* ---------------------------------------------------------------- Made to Measure
   The garments' shadows are black at 60% for the dark page: a soft slate here. */
:root[data-theme='light'] .cr-desc { color: #475569 !important; text-shadow: none !important; }
:root[data-theme='light'] .cr-shadow { background: #1e293b; opacity: 0.22; }

/* ---------------------------------------------------------------- contact
   The fields are recessed dark boxes in the dark theme; here white boxes on
   the white glass, with the same lavender (now violet) edge and cyan focus. */
:root[data-theme='light'] #contact form > label,
:root[data-theme='light'] #contact form > div:not([data-hp-field]) > label { background: #ffffff !important; }
:root[data-theme='light'] #contact input::placeholder,
:root[data-theme='light'] #contact textarea::placeholder { color: #64748b !important; }
:root[data-theme='light'] [data-contact-status][data-tone='ok'] { color: #15803d; }
:root[data-theme='light'] [data-contact-status][data-tone='err'] { color: #be123c; }

/* ---------------------------------------------------------------- the kit's badges
   (Task Job's tags, among others): a dark base tinted in the tone, with pale
   text, in the kit; here a white base tinted in the tone, with dark text. */
:root[data-theme='light'] .ug-badge {
  border-color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 42%, transparent);
  background-color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 12%, white);
  color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 52%, black);
  box-shadow: none;
}

/* ---------------------------------------------------------------- services carousel
   The neighbours peeking in are darkened in the dark theme (overrides.css
   says why: fading let the aurora through). On a light page darkening reads
   as grey, so they fade towards the page instead; dark ink at this opacity
   still measures over 4.5:1 on white. */
:root[data-theme='light'] [data-nx-cards] > [data-nx-card] {
  filter: saturate(0.85);
  opacity: 0.6;
  transition: filter 260ms ease, opacity 260ms ease, box-shadow 260ms ease;
}
:root[data-theme='light'] [data-nx-cards] > [data-nx-card][data-nx-active] {
  filter: none;
  opacity: 1;
}

/* ---------------------------------------------------------------- portfolio
   The cards' shadows are black for the dark page; soft slate on a light one. */
:root[data-theme='light'] #portfolio [data-slide] { box-shadow: 0 16px 36px -10px rgb(15 23 42 / 0.32) !important; }
:root[data-theme='light'] #portfolio [data-slide][aria-hidden='false'] {
  box-shadow: 0 0 30px -6px rgb(139 92 246 / 0.4), 0 26px 50px -14px rgb(15 23 42 / 0.45) !important;
}

/* ---------------------------------------------------------------- service cards' inks
   overrides.css gives the cards their own inks (--nxc-*): the muted one is a
   pale lavender for 8.5px labels on dark glass. On white glass it is slate
   600, which holds 4.5:1 at that size; the bright cyan accent goes to 700. */
:root[data-theme='light'] [data-service-card] {
  --nxc-cyan: #0e7490;
  --nxc-muted: #475569;
  --nxc-tile: rgb(15 23 42 / 0.03);
}

/* ---------------------------------------------------------------- hero icon cloud
   A few of the brand marks are white (Next.js, Vercel), drawn for the dark
   page; on a light one a hairline slate edge keeps them from vanishing, and
   leaves the coloured ones as they are. */
:root[data-theme='light'] [data-nx-hero-icons] canvas {
  filter: drop-shadow(0 0 0.6px rgb(15 23 42 / 0.6)) drop-shadow(0 1px 2px rgb(15 23 42 / 0.16));
}