/* Light theme: everything that only applies under [data-theme="light"] lives here (tokens stay in tokens.css).
   Redesign 2026-09-30 (owner: the light version was "very ugly and dead"). Dark is alive because of layers,
   ember glows and contrast; light gets the same three things in its own terms:
   1. layers: warm paper, near-white raised surfaces, warm (never grey) shadows and a lit top rim;
   2. ember as a vivid fill with ink on it (exactly the dark buttons), peach light where dark has glows;
   3. contrast beats: three "ink islands" (numbers strip, On Stage band, the contact console) set in the night palette. */

/* ---------- ink islands ---------- */
/* Pointing the normal tokens at the night palette makes every component inside render as in dark mode,
   with no per-component rules. Ember alphas stay the light (vivid-based) ones, which glow well on ink. */
[data-theme="light"] :is(.numbers__list, .stage, .console) {
  --ink: var(--night-ink);
  --graphite: var(--night-graphite);
  --graphite-2: var(--night-graphite-2);
  --steel: var(--night-steel);
  --bone: var(--night-bone);
  --ember: var(--night-ember);
  --ember-hi: var(--night-ember-hi);
  --ember-display: var(--night-ember);
  --bone-80: var(--night-bone-80);
  --bone-72: var(--night-bone-72);
  --bone-25: var(--night-bone-25);
  --bone-18: var(--night-bone-18);
  --bone-14: var(--night-bone-14);
  --bone-10: var(--night-bone-10);
  --bone-08: var(--night-bone-08);
  --bone-06: var(--night-bone-06);
  --bone-04: var(--night-bone-04);
  --ink-92: var(--night-ink-92);
  --ink-72: var(--night-ink-72);
  --ink-00: var(--night-ink-00);
  --rim: var(--night-bone-06);
  color: var(--bone);
}

/* ---------- page ---------- */
/* A section's z-index:-1 glow otherwise paints under the body's own background and never shows;
   isolating the section keeps its light above the paper. The footer is lifted so the contact glow
   that runs under it never tints its text. */
[data-theme="light"] :is(.hero, .contact) { isolation: isolate; }
[data-theme="light"] .footer { position: relative; }
/* Grain as paper tooth: multiply darkens a hair instead of washing the page out. */
[data-theme="light"] body::after { mix-blend-mode: multiply; opacity: 0.05; }

/* ---------- vivid ember wherever ember is a fill, not text ---------- */
[data-theme="light"] :is(.hero__dot, .about__dot, .about__rule, .on-air__lamp, .funnel__drip, .funnel__glyph i:nth-child(4)) { background: var(--ember-fill); }
[data-theme="light"] :is(.hero__dot, .about__dot, .funnel__drip) { box-shadow: 0 0 10px var(--ember-50); }
[data-theme="light"] .about__rule { box-shadow: 0 0 12px var(--ember-35); }
[data-theme="light"] .hero__dot::after { border-color: var(--ember-fill); }
[data-theme="light"] .hero__sub { border-inline-start-color: var(--ember-fill); }
[data-theme="light"] :focus-visible { outline-color: var(--ember); }

/* Display words: the sheen runs over the display ember (large type, 3:1) with a peach halo under it. */
[data-theme="light"] :is(.sheen, .h2__manage, .lockup__line--manage .lockup__big) {
  background-image: linear-gradient(100deg, var(--ember-display) 42%, var(--ember-hi) 50%, var(--ember-display) 58%);
  filter: drop-shadow(0 6px 20px var(--ember-22));
}
[data-theme="light"][lang="ar"] .lockup__line--manage .lockup__voice { color: var(--ember-display); }

/* ---------- buttons ---------- */
/* Primary: the dark theme's own button (vivid ember, ink label, ink icon well), lifted by peach light. */
[data-theme="light"] .btn--primary { background: var(--ember-fill); color: var(--on-ember); box-shadow: 0 0 0 1px var(--ember-70), 0 14px 34px -10px var(--ember-50), 0 3px 8px var(--shadow-soft); }
[data-theme="light"] .btn--primary:hover { box-shadow: 0 0 0 1px var(--ember-fill), 0 20px 46px -12px var(--ember-50), 0 4px 10px var(--shadow-soft); }
[data-theme="light"] .btn--primary .btn__arrow { background: var(--on-ember); color: var(--ember-fill); }
/* Ghost and quiet: white raised pills instead of beige-on-beige. */
[data-theme="light"] :is(.btn--ghost, .btn--quiet) { background: var(--graphite); border-color: var(--bone-10); box-shadow: inset 0 1px 0 var(--rim), 0 1px 2px var(--shadow-soft), 0 10px 24px -14px var(--shadow-deep); }
[data-theme="light"] :is(.btn--ghost, .btn--quiet):hover { background: var(--graphite); border-color: var(--ember-40); }
[data-theme="light"] .btn__arrow--down { background: var(--ink-deep); box-shadow: none; }

/* ---------- nav capsule ---------- */
[data-theme="light"] .nav__inner {
  background: var(--glass); border-color: var(--bone-08);
  box-shadow: inset 0 1px 0 var(--rim), 0 1px 2px var(--shadow-soft), 0 16px 40px -16px var(--shadow-deep);
}
[data-theme="light"] .nav.is-scrolled .nav__inner { background: var(--glass-92); border-color: var(--bone-10); }
[data-theme="light"] .nav__inner::after { background: linear-gradient(90deg, transparent, var(--ember-fill) 30%, var(--ember-fill) 70%, transparent); box-shadow: 0 0 12px var(--ember-35); }
[data-theme="light"] .nav__links { background: var(--bone-04); border-color: var(--bone-06); }
[data-theme="light"] .nav__links a[aria-current="true"] { background: var(--graphite); box-shadow: inset 0 0 0 1px var(--ember-40), 0 4px 12px -4px var(--ember-35); }
[data-theme="light"] .nav__links a[aria-current="true"]::before { background: var(--ember-fill); box-shadow: 0 0 8px var(--ember-50); }
[data-theme="light"] .avatar { background: conic-gradient(from var(--angle), var(--ember-fill), var(--ember-12) 40%, var(--ember-hi) 60%, var(--ember-fill)); box-shadow: 0 0 16px var(--ember-35); }
[data-theme="light"] .avatar img { border-color: var(--graphite); }
[data-theme="light"] .prefs { background: var(--bone-04); border-color: var(--bone-06); }
[data-theme="light"] .prefs__knob { background: var(--graphite); box-shadow: inset 0 0 0 1px var(--bone-06), 0 1px 2px var(--shadow-soft), 0 4px 10px -2px var(--shadow-deep); }
[data-theme="light"] :is(.theme-toggle, .lang):hover .prefs__knob { box-shadow: inset 0 0 0 1px var(--ember-50), 0 4px 14px -2px var(--ember-35); }
[data-theme="light"] .nav__menu { background: var(--graphite); border-color: var(--bone-10); box-shadow: 0 4px 12px -4px var(--shadow-deep); }
@media (max-width: 1023px) {
  [data-theme="light"] .nav__links { background: var(--glass-92); border-color: var(--bone-08); box-shadow: inset 0 1px 0 var(--rim), 0 24px 50px -18px var(--shadow-deep); }
}

/* ---------- hero ---------- */
/* Sunrise top-left, peach light pooling behind the portrait (hero::before is mirrored in RTL by sections.css).
   The layer runs on under the numbers strip and every glow is sized to the layer, so none is cut off by an edge. */
[data-theme="light"] .hero::before {
  inset-block-end: -120px;
  background:
    radial-gradient(ellipse 42% 46% at 82% 48%, var(--glow-peach), transparent),
    radial-gradient(ellipse 40% 50% at 4% 0%, var(--steel-10), transparent);
}
/* The offset frame becomes a pane of peach light under the photo, the photo a print lifted off the paper. */
[data-theme="light"] .hero__frame { border-color: var(--ember-35); background: linear-gradient(200deg, var(--ember-16), var(--ember-04) 60%); box-shadow: 0 30px 80px -30px var(--glow-peach); }
[data-theme="light"] .hero__img { box-shadow: 0 2px 6px var(--shadow-soft), 0 30px 70px -28px var(--shadow-deep), 0 50px 90px -40px var(--ember-35); }
[data-theme="light"] .hero__logos img { opacity: 0.72; }
@media (max-width: 767px) {
  /* phones: the photo is on top, so the light pools behind it and leaves the words on clean paper */
  [data-theme="light"] .hero::before { background: radial-gradient(ellipse 80% 22% at 70% 20%, var(--glow-peach), transparent); }
  [data-theme="light"] .hero__img { box-shadow: 0 0 0 1px var(--ember-35), 0 24px 50px -22px var(--ember-50), 0 2px 6px var(--shadow-soft); }
}

/* ---------- numbers: ink island #1 ---------- */
/* Dark strip right under the light hero: the first contrast beat, and the figures glow as in dark. */
[data-theme="light"] .numbers__list { box-shadow: inset 0 1px 0 var(--night-bone-10), 0 2px 6px var(--shadow-soft), 0 30px 60px -26px var(--shadow-deep); border-color: var(--night-bone-08); }

/* ---------- about ---------- */
[data-theme="light"] .about { isolation: isolate; }
[data-theme="light"] .about::before { content: ""; position: absolute; inset: 8% 10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--ember-12), transparent); }
[data-theme="light"] .mf--manage { background-image: linear-gradient(var(--ember-fill), var(--ember-fill)); background-size: 100% 0.09em; }
[data-theme="light"] .pill { box-shadow: 0 0 0 2px var(--graphite), 0 8px 18px -6px var(--shadow-deep); }
@media (hover: hover) {
  [data-theme="light"] .pill:hover { box-shadow: 0 0 0 2px var(--graphite), 0 0 0 3px var(--ember-50), 0 16px 34px -8px var(--ember-35); }
}

/* ---------- services ---------- */
[data-theme="light"] .service::before { background: var(--ember-fill); box-shadow: 0 0 10px var(--ember-50); }
[data-theme="light"] .service.is-open .service__icon { background: var(--ember-fill); border-color: var(--ember-fill); box-shadow: 0 0 10px var(--ember-50); }
/* The map: a pool of peach light under a raised white disc. */
[data-theme="light"] .svc-map::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--ember-16), var(--ember-04) 60%, transparent); }
[data-theme="light"] .svc-map__core {
  background: radial-gradient(circle at 50% 22%, var(--graphite), var(--graphite-2) 78%); border-color: var(--bone-06);
  box-shadow: inset 0 1px 0 var(--rim), 0 2px 6px var(--shadow-soft), 0 30px 60px -24px var(--shadow-deep), 0 0 70px var(--ember-16);
}
[data-theme="light"] .svc-map__edge { stroke: var(--bone-18); }
[data-theme="light"] .svc-map__spoke.is-lit { stroke: var(--ember-fill); }
[data-theme="light"] .svc-map__pulse { fill: var(--ember-fill); filter: drop-shadow(0 0 2px var(--ember-50)); }
[data-theme="light"] .svc-map__node i { background: var(--graphite); border-color: var(--bone-25); box-shadow: 0 2px 5px var(--shadow-soft); }
[data-theme="light"] .svc-map__node.is-active i { background: var(--ember-fill); border-color: var(--ember-fill); box-shadow: 0 0 0 6px var(--ember-16), 0 0 18px var(--ember-50); }

/* ---------- selected work ---------- */
[data-theme="light"] .work::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent); }
[data-theme="light"] .work__screen {
  background: var(--graphite); border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: 0 2px 6px var(--shadow-soft), 0 30px 60px -28px var(--shadow-deep), 0 50px 100px -40px color-mix(in srgb, var(--brand) 50%, transparent);
}
[data-theme="light"] .work__bar { background: linear-gradient(180deg, var(--graphite), var(--graphite-2)); }
[data-theme="light"] .work__url { background: var(--ink); box-shadow: inset 0 0 0 1px var(--bone-06); }
[data-theme="light"] .work__card.is-open { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%); }
[dir="rtl"][data-theme="light"] .work__card.is-open { background: linear-gradient(270deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%); }

/* ---------- on stage: ink island #2, a full-width band ---------- */
/* A dark stage with warm spotlights: the photos and the reel read as a lit room, the ON AIR lamp glows. */
[data-theme="light"] .stage { isolation: isolate; }
[data-theme="light"] .stage::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 42% at 78% 0%, var(--ember-22), transparent),
    radial-gradient(ellipse 30% 36% at 6% 100%, var(--ember-12), transparent),
    linear-gradient(180deg, var(--night-graphite), var(--night-ink) 40%);
}
[data-theme="light"] .stage__p { box-shadow: 0 0 0 1px var(--night-bone-06); }
[data-theme="light"] .reel { box-shadow: 0 0 60px var(--ember-22), 0 0 0 1px var(--ember-35); }

/* ---------- insights: graphite cards on the warm paper ---------- */
[data-theme="light"] .insight { border-color: var(--bone-14); box-shadow: 0 16px 34px -28px var(--shadow-deep); }
[data-theme="light"] .insight:hover, [data-theme="light"] .insight:focus-visible { border-color: var(--ember-fill); box-shadow: 0 18px 38px -26px var(--shadow-deep); }

/* ---------- contact: ink island #3, the campaign console is a night window on the paper ---------- */
[data-theme="light"] .contact::before { background: radial-gradient(ellipse 50% 44% at 72% 64%, var(--glow-peach), transparent); }
[data-theme="light"] .launch__rule { background: var(--ember-fill); }
[data-theme="light"] .console {
  border: 1px solid var(--night-bone-08);
  background: radial-gradient(760px 300px at 70% 0%, var(--ember-12), transparent 70%), linear-gradient(180deg, var(--night-graphite), var(--night-ink));
  box-shadow: inset 0 1px 0 var(--night-bone-10), 0 2px 6px var(--shadow-soft), 0 40px 80px -36px var(--shadow-deep), 0 30px 90px -30px var(--glow-peach);
}
[dir="rtl"][data-theme="light"] .console { background: radial-gradient(760px 300px at 30% 0%, var(--ember-12), transparent 70%), linear-gradient(180deg, var(--night-graphite), var(--night-ink)); }

/* ---------- floating buttons ---------- */
[data-theme="light"] .to-top {
  background: radial-gradient(closest-side, var(--graphite) 88%, transparent 89%), conic-gradient(var(--ember-fill) calc(var(--p, 0) * 1turn), var(--bone-10) 0);
  box-shadow: 0 2px 5px var(--shadow-soft), 0 12px 26px -10px var(--shadow-deep);
}
[data-theme="light"] .to-top:hover { box-shadow: 0 12px 30px -8px var(--ember-50); }
[data-theme="light"] .funnel__btn { background: var(--graphite); border-color: var(--bone-08); box-shadow: 0 2px 5px var(--shadow-soft), 0 12px 26px -10px var(--shadow-deep); }
[data-theme="light"] :is(.funnel__btn:hover, .funnel[data-open] .funnel__btn) { border-color: var(--ember-40); box-shadow: 0 12px 30px -8px var(--ember-35); }
[data-theme="light"] .funnel__glyph i:nth-child(4) { box-shadow: 0 0 6px var(--ember-50); }
[data-theme="light"] .funnel__row a { background: var(--graphite); border-color: var(--bone-08); box-shadow: 0 2px 5px var(--shadow-soft), 0 12px 26px -12px var(--shadow-deep); }
[data-theme="light"] .funnel__row a:is(:hover, :focus-visible) { background: var(--graphite); border-color: var(--ember-40); }
[data-theme="light"] .funnel__row--convert a,
[data-theme="light"] .funnel__row--convert a:is(:hover, :focus-visible) { background: var(--ember-fill); border-color: var(--ember-fill); color: var(--on-ember); box-shadow: 0 0 0 1px var(--ember-70), 0 14px 30px -10px var(--ember-50); }
[data-theme="light"] .funnel__row--convert :is(.funnel__icon, a:hover .funnel__icon) { background: var(--on-ember); color: var(--ember-fill); }
[data-theme="light"] .funnel__row--convert .funnel__stage { color: var(--on-ember); }
[data-theme="light"] .wa-float { background: var(--ember-fill); color: var(--on-ember); box-shadow: 0 0 0 1px var(--ember-70), 0 14px 30px -10px var(--ember-50); }

/* ---------- loader ---------- */
/* the same bright paper as the page, so lifting the loader reveals the page without a change of tone */
[data-theme="light"] .loader { background: var(--ink); }
[data-theme="light"] .loader::before { background: radial-gradient(closest-side, var(--glow-peach), transparent 70%); }
[data-theme="light"] .loader__bar span { background: var(--ember-fill); box-shadow: 0 0 10px var(--ember-50); }