/* ===========================================================
   AGENTWORKS — LIGHT THEME OVERRIDE
   Activated via <html data-theme="light">
   Fully reversible: remove the attribute to fall back to dark.
   Strategy: remap the same semantic ink tokens so downstream
   selectors stay untouched. --ink-050 (page bg) becomes near-
   white, --ink-950 (primary ink) becomes near-black.
   =========================================================== */

[data-theme="light"] {
  /* Surfaces (lightest -> darkest, INVERTED from dark theme) */
  --ink-000: #ffffff;
  --ink-050: #f8f7f4;   /* page background — warm off-white to pair with golden coast */
  --ink-100: #efede8;
  --ink-200: #e5e2dc;
  --ink-300: #d8d5cd;
  --ink-400: #c2beb5;   /* hairline / border — warm stone */
  --ink-500: #8a8579;   /* muted stone */
  --ink-600: #5c584f;   /* charcoal-warm */
  --ink-700: #3a3831;   /* deep slate */
  --ink-800: #26241f;   /* strong body ink */
  --ink-900: #14130f;   /* near-black body */
  --ink-950: #0a0908;   /* primary ink — near-black */
  --ink-pure: #000000;

  /* Accent — warm bronze/graphite instead of platinum silver */
  --silver: #6b6459;         /* editorial italic accent — warm graphite */
  --silver-bright: #3a3831;  /* darker for stronger legibility */
  --silver-dim: #a09b90;

  /* Signal accent — deeper teal to pull from ocean */
  --signal: #1c6b7a;
  --signal-dim: rgba(28, 107, 122, 0.14);

  /* Hairline recomputed against new palette */
  --hairline: 1px solid var(--ink-400);
}

/* ---------- Global surfaces ---------- */
[data-theme="light"] body {
  background: var(--ink-050);
  color: var(--ink-900);
}

/* ---------- Nav ---------- */
[data-theme="light"] .nav {
  background: rgba(248, 247, 244, 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(30, 28, 24, 0.08);
}
[data-theme="light"] .nav__logo { color: var(--ink-950); }
[data-theme="light"] .nav__link { color: var(--ink-700); }
[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__link.is-active { color: var(--ink-950); }
[data-theme="light"] .nav__cta {
  background: var(--ink-950);
  color: var(--ink-050);
  border-color: var(--ink-950);
}
[data-theme="light"] .nav__cta:hover {
  background: var(--ink-800);
  border-color: var(--ink-800);
}

/* ---------- Hero (color coast + light overlays) ---------- */
[data-theme="light"] .hero__bg {
  background: var(--ink-050);
}
[data-theme="light"] .hero__bg::before {
  background-image: url("../assets/img/coast-hero-color-1920.webp");
  /* Keep saturation, drop overall brightness slightly for text overlap only */
  filter: saturate(1.05) contrast(1.02) brightness(1);
  opacity: 0.95;
}
[data-theme="light"] .hero__bg::after {
  /* Light-mode overlay: warm off-white wash at top (behind wordmark),
     transparent through the middle, deeper fade at the bottom to feel grounded. */
  background:
    linear-gradient(180deg,
      rgba(248, 247, 244, 0.55) 0%,
      rgba(248, 247, 244, 0.35) 30%,
      rgba(248, 247, 244, 0.15) 55%,
      rgba(248, 247, 244, 0.7) 100%),
    linear-gradient(90deg,
      rgba(248, 247, 244, 0.7) 0%,
      rgba(248, 247, 244, 0.2) 55%,
      rgba(248, 247, 244, 0.05) 100%);
}
[data-theme="light"] .hero__grid {
  /* Lighter grid, still functional */
  background-image:
    linear-gradient(rgba(20,20,20,0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,20,0.32) 1px, transparent 1px);
  opacity: 0.06;
}
[data-theme="light"] .hero__title { color: var(--ink-950); }
[data-theme="light"] .hero__title em { color: var(--silver); }
[data-theme="light"] .hero__sub { color: var(--ink-800); }
[data-theme="light"] .hero__meta { color: var(--ink-800); }
[data-theme="light"] .hero__meta .kbd,
[data-theme="light"] .hero__meta em { color: var(--ink-900); }

/* Text-on-photo: subtle white halo behind hero title for guaranteed legibility */
[data-theme="light"] .hero__title {
  text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 2px 22px rgba(255,255,255,0.35);
}

/* ---------- Buttons ---------- */
[data-theme="light"] .btn--primary,
[data-theme="light"] .cta {
  background: var(--ink-950);
  color: var(--ink-050);
  border-color: var(--ink-950);
}
[data-theme="light"] .btn--primary:hover,
[data-theme="light"] .cta:hover {
  background: var(--ink-800);
  border-color: var(--ink-800);
}
[data-theme="light"] .btn--ghost,
[data-theme="light"] .btn--secondary {
  color: var(--ink-950);
  border-color: rgba(10,9,8,0.35);
  background: transparent;
}
[data-theme="light"] .btn--ghost:hover,
[data-theme="light"] .btn--secondary:hover {
  border-color: var(--ink-950);
  background: rgba(10,9,8,0.04);
}

/* ---------- Cards / sections ---------- */
[data-theme="light"] .cap,
[data-theme="light"] .shipped,
[data-theme="light"] .principal,
[data-theme="light"] .card,
[data-theme="light"] .service,
[data-theme="light"] .case,
[data-theme="light"] .cta-final {
  background: var(--ink-000);
  border-color: var(--ink-400);
}
[data-theme="light"] .cap__num,
[data-theme="light"] .shipped__num,
[data-theme="light"] .shipped__eyebrow,
[data-theme="light"] .cap__eyebrow,
[data-theme="light"] .eyebrow {
  color: var(--ink-700);
}
[data-theme="light"] .cap__title,
[data-theme="light"] .shipped__title,
[data-theme="light"] .principal__name,
[data-theme="light"] .card__title,
[data-theme="light"] .service__title,
[data-theme="light"] .case__title,
[data-theme="light"] .cta-final__title {
  color: var(--ink-950);
}
[data-theme="light"] .cap__title em,
[data-theme="light"] .shipped__title em,
[data-theme="light"] .cta-final__title em,
[data-theme="light"] .sec__title em {
  color: var(--silver);
}
[data-theme="light"] .cap__body,
[data-theme="light"] .shipped__body,
[data-theme="light"] .principal__bio,
[data-theme="light"] p, [data-theme="light"] li {
  color: var(--ink-800);
}
[data-theme="light"] .tag,
[data-theme="light"] .chip {
  background: var(--ink-100);
  color: var(--ink-800);
  border-color: var(--ink-400);
}

/* ---------- Footer ---------- */
[data-theme="light"] .footer {
  background: var(--ink-100);
  border-top: 1px solid var(--ink-400);
}
[data-theme="light"] .footer,
[data-theme="light"] .footer p,
[data-theme="light"] .footer a {
  color: var(--ink-800);
}
[data-theme="light"] .footer__logo { color: var(--ink-950); }
[data-theme="light"] .footer a:hover { color: var(--ink-950); }

/* ---------- Section titles / eyebrows on page bg ---------- */
[data-theme="light"] .sec__title { color: var(--ink-950); }
[data-theme="light"] .sec__intro,
[data-theme="light"] .sec__lede { color: var(--ink-800); }

/* ---------- Intro splash ---------- */
[data-theme="light"] .intro {
  background: var(--ink-050);
  color: var(--ink-950);
}
[data-theme="light"] .intro__stage,
[data-theme="light"] .intro__logo { color: var(--ink-950); }
[data-theme="light"] .intro__grid {
  background-image:
    linear-gradient(rgba(20,20,20,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,20,0.5) 1px, transparent 1px);
  opacity: 0.08;
}
[data-theme="light"] .intro__beam,
[data-theme="light"] .intro__beam--horizontal,
[data-theme="light"] .intro__beam--vertical {
  background: linear-gradient(90deg, transparent 0%, rgba(10,9,8,0.65) 50%, transparent 100%);
}
[data-theme="light"] .intro__beam--vertical {
  background: linear-gradient(180deg, transparent 0%, rgba(10,9,8,0.65) 50%, transparent 100%);
}
[data-theme="light"] .intro__glitch--cyan,
[data-theme="light"] .intro__glitch--coral,
[data-theme="light"] .intro__ghost {
  color: rgba(10,9,8,0.45);
  mix-blend-mode: multiply;
}
[data-theme="light"] .intro__shockwave { border-color: rgba(10,9,8,0.45); }
[data-theme="light"] .intro__bloom {
  background: radial-gradient(circle, rgba(10,9,8,0.15) 0%, transparent 60%);
}

/* ---------- Assessment / form ---------- */
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
  background: var(--ink-000);
  color: var(--ink-950);
  border-color: var(--ink-400);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--ink-500); }
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--ink-950);
  outline: 2px solid rgba(10,9,8,0.12);
}

/* ---------- Misc ---------- */
[data-theme="light"] hr,
[data-theme="light"] .divider { border-color: var(--ink-400); }
[data-theme="light"] ::selection { background: var(--ink-950); color: var(--ink-050); }