/* Light theme. html[data-theme="light"], set by the toggle in */

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

  --bg: #f3f7fc;
  --surface-bezel: #ffffff;
  --surface-raised: #eef4fb;
  --surface-overlay: #e3ecf7;
  --surface-sunken: #e8f0f9;
  --card: #ffffff;
  --card-2: #ffffff;
  --line: rgba(6, 30, 66, 0.1);
  --line-card: #d6e1ee;
  --glass: rgba(255, 255, 255, 0.6);

  --text-1: #071a33;
  --text-2: rgba(7, 26, 51, 0.78);
  --text-3: #52647c;
  --text-4: rgba(7, 26, 51, 0.66);

  /* cyan is unreadable on white, so the accent deepens */
  --accent: #0a66d6;   /* 4.9:1 on the light page, 5.4:1 on white */
  --grad-text: linear-gradient(135deg, #0aa6ee 0%, #0a86fa 40%, #0a4fe0 100%);
  --ink-quiet: #6a83a6;

  /* silk in daylight: pale blue folds with white highlights */
  --silk-outer: #f3f7fc;
  --silk-base-1: #d7e9ff;
  --silk-base-2: #eef5fd;
  --silk-lit-a: #ffffff;
  --silk-lit-b: #a9d6ff;
  --silk-lit-c: #66b0ff;
  --silk-crease: #c3d8f3;
  --silk-rim: rgba(255, 255, 255, 0.95);
  --silk-cool-a: #cfe3ff;
  --silk-cool-b: #8fc5ff;
  --silk-glow: rgba(10, 134, 250, 0.16);
}
html[data-theme="dark"] { color-scheme: dark; }

/* ---------- liquid glass ---------- */
[data-theme="light"] .lg {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42) 55%, rgba(255, 255, 255, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(6, 30, 66, 0.05),
    0 10px 30px -12px rgba(10, 40, 90, 0.28);
}
[data-theme="light"] .lg::after { background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(6, 30, 66, 0.06) 40%, rgba(6, 30, 66, 0.04) 60%, rgba(255, 255, 255, 0.8)); }

/* ---------- header ---------- */
[data-theme="light"] .nav-pill::before,
[data-theme="light"] .menu-btn,
[data-theme="light"] .theme-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(6, 30, 66, 0.1), 0 10px 28px -12px rgba(10, 40, 90, 0.3);
}
[data-theme="light"] .menu-btn:hover,
[data-theme="light"] .theme-btn:hover { background: #fff; }
[data-theme="light"] .nav-pill__link { color: var(--text-2); }
[data-theme="light"] .nav-pill__link.is-active,
[data-theme="light"] .nav-pill__link:hover { color: var(--text-1); }
[data-theme="light"] .nav-pill__marker { background: #fff; box-shadow: inset 0 0 0 1px rgba(6, 30, 66, 0.1), 0 6px 16px -8px rgba(10, 40, 90, 0.35); }

/* ---------- menu ---------- */
[data-theme="light"] .site-menu__box {
  background: radial-gradient(ellipse 80% 45% at 100% 0%, rgba(10, 134, 250, 0.1), transparent 70%), rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(6, 30, 66, 0.08), 0 30px 60px -24px rgba(10, 40, 90, 0.35);
}
[data-theme="light"] .site-menu__list a { color: var(--text-2); }
[data-theme="light"] .site-menu__list a:hover { background: rgba(6, 30, 66, 0.05); color: var(--text-1); }
[data-theme="light"] .site-menu__list a.is-current { background: rgba(10, 127, 230, 0.1); color: var(--text-1); }
[data-theme="light"] .site-menu__mail:hover { color: var(--text-1); }
[data-theme="light"] .site-menu__list a:hover .site-menu__ic, [data-theme="light"] .site-menu__list a.is-current .site-menu__ic { color: var(--text-1); }

/* ---------- hero ---------- */
[data-theme="light"] .hero__grain { mix-blend-mode: soft-light; opacity: 0.35; }
[data-theme="light"] .hero__bg .s2 { opacity: 0.55; }
[data-theme="light"] .hero__lede { color: var(--text-2); }
[data-theme="light"] .trusted__inner p { color: var(--text-3); }
[data-theme="light"] .trusted__logos img { filter: brightness(0); opacity: 0.5; }
[data-theme="light"] .trusted__logos li:hover img { opacity: 0.85; }

/* ---------- shared bits ---------- */
[data-theme="light"] .link-arrow { color: var(--text-2); }
[data-theme="light"] .link-arrow:hover { color: var(--text-1); }

[data-theme="light"] .pill { color: var(--text-2); }

/* ---------- services ---------- */
[data-theme="light"] .svc { border-color: var(--line-card); background: linear-gradient(160deg, #ffffff 0%, #f1f6fc 100%); box-shadow: 0 18px 40px -28px rgba(10, 40, 90, 0.35); }
[data-theme="light"] .svc:hover { border-color: rgba(10, 127, 230, 0.4); }
[data-theme="light"] .svc__icon svg { stroke: var(--text-1); }
/* the blue card keeps white type */
[data-theme="light"] .svc--web { color: #fff; border-color: transparent; background: linear-gradient(120deg, #0a4dff 0%, #0b63f0 45%, #0d8dfa 78%, #18cdfd 100%); box-shadow: 0 24px 50px -26px rgba(10, 124, 255, 0.6); }
[data-theme="light"] .svc--web p { color: rgba(255, 255, 255, 0.9); }
[data-theme="light"] .svc--web .svc__icon svg { stroke: #fff; }
[data-theme="light"] .svc--web .link-arrow { color: rgba(255, 255, 255, 0.92); }

/* the carousel CTA card keeps its own colours in light mode */
/* ---------- hero box ---------- */

/* ---------- works ---------- */
[data-theme="light"] .work__quote { background: #fff; box-shadow: inset 0 0 0 1px var(--line-card), 0 18px 40px -30px rgba(10, 40, 90, 0.4); }
[data-theme="light"] .work__quote blockquote { color: var(--text-2); }
[data-theme="light"] .work__kind { background: #fff; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-card); }
[data-theme="light"] .work__btn { background: var(--surface-raised); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-card); }
[data-theme="light"] .work__btn i { background: linear-gradient(180deg, #1668ff, #0a4dff); }
[data-theme="light"] .work__btn svg { stroke: #fff; }
[data-theme="light"] .work__btn:hover { color: #fff; }
[data-theme="light"] .work__btn:hover i { background: #fff; }
[data-theme="light"] .work__btn:hover svg { stroke: #0a4dff; }
[data-theme="light"] .work__shot { box-shadow: 0 30px 60px -38px rgba(10, 60, 160, 0.45); }
[data-theme="light"] .slider__btn svg { stroke: var(--text-1); }
[data-theme="light"] .wprog__track { background: rgba(6, 30, 66, 0.12); }
/* cinematic details sit over the dark screenshot gradient, so they stay white */
/* arrows on light pages */
[data-theme="light"] .slider__btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(6, 30, 66, 0.1), 0 12px 26px -14px rgba(10, 40, 90, 0.4); }
[data-theme="light"] .slider__btn:hover:not(:disabled) { background: linear-gradient(180deg, #1668ff, #0a4dff); }
[data-theme="light"] .slider__btn:hover:not(:disabled) svg { stroke: #fff; }

/* ---------- benefits: the band turns pale blue ---------- */
[data-theme="light"] .benefits { background: linear-gradient(#d4e6ff 20%, var(--bg) 75%); }

/* ---------- process ---------- */
[data-theme="light"] .process { background: none; }
/* step cards and scenes: see process.css */

/* ---------- my mission map ---------- */
[data-theme="light"] .mission {
  --m-card: #ffffff;
  --m-rim: rgba(6, 30, 66, 0.1);
  --m-ink: #071a33;
  --m-ink-3: rgba(7, 26, 51, 0.55);
  --m-bar: rgba(80, 110, 160, 0.25);
  background:
    radial-gradient(circle at 1px 1px, rgba(10, 110, 230, 0.16) 1px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(ellipse 70% 60% at 60% 45%, rgba(10, 127, 230, 0.1), transparent 70%);
}
[data-theme="light"] .mstation { box-shadow: inset 0 0 0 1px var(--m-rim), 0 18px 40px -24px rgba(10, 40, 90, 0.35); }
[data-theme="light"] .mstation__site { background: #f3f7fc; }
[data-theme="light"] .mstation__tag { background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 110, 230, 0.25), 0 6px 14px -8px rgba(10, 40, 90, 0.3); }
[data-theme="light"] .mission__dot { fill: #0a86fa; filter: drop-shadow(0 0 4px rgba(10, 134, 250, 0.6)); }
[data-theme="light"] .about-tabs__marker { background: #fff; box-shadow: inset 0 0 0 1px rgba(6, 30, 66, 0.1), 0 6px 16px -8px rgba(10, 40, 90, 0.35); }
[data-theme="light"] .about-tabs__tab.is-on svg { color: var(--accent); filter: none; }

/* ---------- tools ---------- */
[data-theme="light"] .tools { background: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(10, 134, 250, 0.12), transparent 70%); }

[data-theme="light"] .dots button { background: #c9d7e8; }
[data-theme="light"] .dots button.is-active { background: var(--accent); }

/* ---------- footer ---------- */
[data-theme="light"] .footer__nav a { color: var(--text-2); }
[data-theme="light"] .footer__copy { color: var(--text-3); }
[data-theme="light"] .footer__mark { background: linear-gradient(180deg, rgba(10, 110, 230, 0.16) 0%, rgba(243, 247, 252, 0) 85%); -webkit-background-clip: text; background-clip: text; }

/* THEME SWITCH ANIMATION */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* the blue CTA card keeps white type in both themes */
[data-theme="light"] .cta__copy { color: #fff; }

/* accessibility: the gold stars darken on light backgrounds (3:1 for graphics) */
[data-theme="light"] .review__stars, [data-theme="light"] .htop__stars { color: #a87200; }