/* ECO red / HIDROMEC blue · Shared decorative lights.
 * Opt-in: add eco-brand-lights to body. Load after the existing styles.
 * This reuses the existing material layer so mobile important paint rules do
 * not silently overrule the proposal. No dimensions, typography, logos,
 * controls, focus indicators, or operational status colours are changed.
 * Print styles remain wholly outside this screen-only stylesheet.
 */
@layer eco-mobile-material {
  @media screen {
    body.eco-brand-lights {
      --eco-halo-red:127,41,68;
      --eco-halo-blue:48,113,209;
      --eco-halo-meeting:118,78,163;
      --eco-halo-base:#10151b;
      --eco-halo-background:
        radial-gradient(880px 640px at -7% 2%,rgba(var(--eco-halo-red),.12) 0%,rgba(var(--eco-halo-red),.05) 32%,transparent 70%),
        radial-gradient(960px 760px at 105% 16%,rgba(var(--eco-halo-blue),.135) 0%,rgba(var(--eco-halo-blue),.055) 35%,transparent 72%),
        radial-gradient(900px 820px at 51% 74%,rgba(var(--eco-halo-meeting),.04),transparent 72%),
        linear-gradient(145deg,#11151b,#12171e 54%,#0c1117);
      --eco-halo-surface-color:#1b222a;
      --eco-halo-surface-image:
        radial-gradient(115% 100% at -5% 0,rgba(var(--eco-halo-red),.075),transparent 59%),
        radial-gradient(110% 95% at 104% 12%,rgba(var(--eco-halo-blue),.09),transparent 62%),
        radial-gradient(125% 92% at 9% 0,rgba(255,255,255,.078),transparent 43%),
        linear-gradient(150deg,#252b32 0%,#1c222a 54%,#131a22 100%);
      --eco-halo-surface-edge:rgba(211,221,240,.14);
      --eco-halo-clock:rgba(20,25,32,.9);
      background-color:var(--eco-halo-base)!important;
      background-image:var(--eco-halo-background)!important;
      background-size:auto!important;
      background-position:0 0!important;
      background-repeat:no-repeat!important;
      background-attachment:scroll!important;
    }

    /* The prior mobile full-page paint and brass botanical overlays would
     * cover the new light field. Suppress only these decorative layers. */
    body.eco-brand-lights::before,
    body.eco-brand-lights::after,
    body.eco-brand-lights .client-atmosphere {
      content:none!important;
      display:none!important;
    }

    body.eco-brand-lights :is(
      .card,.kpi,.panel,.hero-shell,.hero-search-wrap,.summary-card,
      .apple-command-center,.home-stat,.home-notification-center,
      .settings-glass-card,.eco-workspace-bar,.team-home-hero,.team-service-hero,
      .team-home-module,.team-record,.team-login,
      .client-login,.client-hero,.client-stat,.client-card,.client-guide,
      .client-building,.client-year-folder,.client-folder,.client-month-folder,
      .client-admin-bar,.client-request-card,.question-card,.result-card,
      .self-reference,.self-details,.gauge
    ) {
      background-color:var(--eco-halo-surface-color)!important;
      background-image:var(--eco-halo-surface-image)!important;
      border-color:var(--eco-halo-surface-edge)!important;
    }

    body.eco-brand-lights #tab-inicio>.apple-command-actions>button,
    body.eco-brand-lights :is(.team-home-modules,.team-service-grid,.team-home-actions)>button {
      background-color:var(--eco-halo-surface-color)!important;
      background-image:var(--eco-halo-surface-image)!important;
      border-color:var(--eco-halo-surface-edge)!important;
    }

    /* Decorative brass seams, not text or state indicators. */
    body.eco-brand-lights :is(.hero-shell,.client-hero,.client-login,.team-home-hero,.team-login,.apple-command-center)::before {
      background:none!important;
      box-shadow:none!important;
    }
    body.eco-brand-lights .eco-ambient-clock {
      background:linear-gradient(120deg,rgba(var(--eco-halo-red),.075),rgba(var(--eco-halo-blue),.09)),var(--eco-halo-clock)!important;
    }
    body.eco-brand-lights .eco-ambient-clock::after {
      background:linear-gradient(90deg,transparent,rgba(var(--eco-halo-red),.35),rgba(var(--eco-halo-blue),.42),transparent)!important;
      box-shadow:none!important;
    }

    /* Entry screens keep their original logo and word animations. */
    body.eco-brand-lights :is(#appSplash,.client-intro,.self-protection-intro,.eco-brand-cinema) {
      background-color:var(--eco-halo-base)!important;
      background-image:var(--eco-halo-background)!important;
    }
    body.eco-brand-lights .eco-brand-cinema::before {
      background:radial-gradient(ellipse at 32% 50%,rgba(var(--eco-halo-red),.085),transparent 49%),radial-gradient(ellipse at 68% 50%,rgba(var(--eco-halo-blue),.105),transparent 49%)!important;
    }

    /* Light mode overrides only paint variables. The existing light typography,
     * focus, action and semantic colours continue to come from the product. */
    html[data-theme="light"] body.eco-brand-lights {
      --eco-halo-base:#f3f6fb;
      --eco-halo-background:
        radial-gradient(880px 640px at -7% 2%,rgba(var(--eco-halo-red),.085) 0%,rgba(var(--eco-halo-red),.025) 34%,transparent 70%),
        radial-gradient(960px 760px at 105% 16%,rgba(var(--eco-halo-blue),.095) 0%,rgba(var(--eco-halo-blue),.03) 36%,transparent 72%),
        radial-gradient(900px 820px at 51% 74%,rgba(var(--eco-halo-meeting),.028),transparent 72%),
        linear-gradient(145deg,#f7f6fa,#f5f7fb 54%,#edf3fa);
      --eco-halo-surface-color:#f6f8fc;
      --eco-halo-surface-image:
        radial-gradient(115% 100% at -5% 0,rgba(var(--eco-halo-red),.032),transparent 59%),
        radial-gradient(110% 95% at 104% 12%,rgba(var(--eco-halo-blue),.04),transparent 62%),
        radial-gradient(125% 92% at 9% 0,rgba(255,255,255,.95),transparent 43%),
        linear-gradient(150deg,rgba(255,255,255,.93),rgba(243,247,252,.86) 54%,rgba(234,240,249,.9));
      --eco-halo-surface-edge:rgba(63,90,129,.13);
      --eco-halo-clock:rgba(248,250,253,.94);
    }

    @media(max-width:760px) {
      body.eco-brand-lights {
        --eco-halo-background:
          radial-gradient(440px 410px at -15% 0,rgba(var(--eco-halo-red),.125) 0%,rgba(var(--eco-halo-red),.045) 38%,transparent 72%),
          radial-gradient(520px 620px at 112% 23%,rgba(var(--eco-halo-blue),.13) 0%,rgba(var(--eco-halo-blue),.04) 41%,transparent 75%),
          radial-gradient(470px 660px at 50% 67%,rgba(var(--eco-halo-meeting),.035),transparent 75%),
          linear-gradient(155deg,#11151b,#10151c 48%,#0c1117);
      }
      html[data-theme="light"] body.eco-brand-lights {
        --eco-halo-background:
          radial-gradient(440px 410px at -15% 0,rgba(var(--eco-halo-red),.085) 0%,rgba(var(--eco-halo-red),.025) 38%,transparent 72%),
          radial-gradient(520px 620px at 112% 23%,rgba(var(--eco-halo-blue),.095) 0%,rgba(var(--eco-halo-blue),.027) 41%,transparent 75%),
          radial-gradient(470px 660px at 50% 67%,rgba(var(--eco-halo-meeting),.025),transparent 75%),
          linear-gradient(155deg,#f7f6fa,#f5f7fb 48%,#edf3fa);
      }
    }
  }
}