/* Ziello brand bundle — injected via reverse proxy (apps/brand).
   Two parts:
   1) App-wide accent: override Twenty's blue design tokens (--t-*) with a Ziello-red ramp.
   2) Login: Immersive-Ink hero behind Twenty's sign-in modal + a red primary button.
   The login styles are scoped under html.ziello-login (a class brand.js adds on the
   login route); the hero element #ziello-hero is built by brand.js. */

:root{
  --ziello-ink:#191918; --ziello-red:#ee203e; --ziello-white:#fff;

  /* --- Ziello-red accent: PRIMARY BUTTONS ONLY ---
     Twenty's primary ("main") button reads --ibtn-bg from --t-color-blue, with
     --t-color-blue10 (hover) and --t-color-blue12 (active). Secondary buttons,
     links, selections, focus rings and tags use OTHER tokens, so overriding just
     these three turns primary buttons Ziello red without recolouring the rest. */
  --t-color-blue:#ee203e;    /* primary button background */
  --t-color-blue10:#d81a37;  /* primary button hover */
  --t-color-blue12:#a3122a;  /* primary button active/pressed */
}

/* ====================== Login: scoped under html.ziello-login ====================== */

/* The hero must cover the app; sits above app content, below Twenty's modal card (z 40). */
#ziello-hero{position:fixed;inset:0;z-index:38;overflow:hidden;background:var(--ziello-ink);
  font-family:Inter,system-ui,-apple-system,sans-serif}
#ziello-hero .zh-glow{position:absolute;inset:-20%;
  background:radial-gradient(40% 45% at 70% 25%,rgba(120,122,130,.30),transparent 60%),
             radial-gradient(35% 40% at 25% 80%,rgba(238,32,62,.12),transparent 60%);
  animation:zh-drift 14s ease-in-out infinite alternate}
#ziello-hero .zh-grid{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);
  background-size:26px 26px;animation:zh-pan 28s linear infinite}
#ziello-hero .zh-dot{position:absolute;border-radius:50%;background:var(--ziello-red)}
#ziello-hero .zh-dot.d1{width:11px;height:11px;left:14%;top:22%;animation:zh-f1 7s ease-in-out infinite,zh-pulse 3.4s ease-in-out infinite}
#ziello-hero .zh-dot.d2{width:7px;height:7px;left:82%;top:64%;animation:zh-f2 9s ease-in-out infinite,zh-pulse 4.1s ease-in-out infinite}
#ziello-hero .zh-dot.d3{width:5px;height:5px;left:20%;top:74%;opacity:.8;animation:zh-f3 11s ease-in-out infinite,zh-pulse 5s ease-in-out infinite}
#ziello-hero .zh-dot.d4{width:4px;height:4px;left:88%;top:30%;opacity:.7;animation:zh-f2 8s ease-in-out infinite,zh-pulse 4.6s ease-in-out infinite}
#ziello-hero .zh-dot.d5{width:6px;height:6px;left:78%;top:20%;opacity:.85;animation:zh-f1 10s ease-in-out infinite,zh-pulse 3.8s ease-in-out infinite}
#ziello-hero .zh-dot.d6{width:3px;height:3px;left:12%;top:54%;opacity:.6;animation:zh-f3 12s ease-in-out infinite}
#ziello-hero .zh-dot.d7{width:8px;height:8px;left:90%;top:78%;opacity:.5;animation:zh-f2 13s ease-in-out infinite,zh-pulse 6s ease-in-out infinite}
#ziello-hero .zh-dot.d8{width:3px;height:3px;left:8%;top:38%;opacity:.6;animation:zh-f1 9.5s ease-in-out infinite}
/* brand mark top-left */
#ziello-hero .zh-mark{position:absolute;left:40px;top:34px}
#ziello-hero .zh-mark svg{display:block}
/* tagline, centered below the modal */
#ziello-hero .zh-tag{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);text-align:center;
  color:#c9cbce;max-width:560px;width:80%;line-height:1.55;font-size:clamp(14px,1.6vw,19px);
  animation:zh-up 1s .2s cubic-bezier(.2,.7,.2,1) both}
#ziello-hero .zh-tag b{color:#fff;font-weight:600}
#ziello-hero .zh-tag .zh-rule{width:46px;height:3px;background:var(--ziello-red);border-radius:2px;margin:14px auto 0}

@keyframes zh-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-4%,3%) scale(1.08)}}
@keyframes zh-pan{0%{background-position:0 0}100%{background-position:26px 52px}}
@keyframes zh-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-16px)}}
@keyframes zh-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,12px)}}
@keyframes zh-f3{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,14px)}}
@keyframes zh-pulse{0%,100%{box-shadow:0 0 0 0 rgba(238,32,62,.45)}50%{box-shadow:0 0 18px 3px rgba(238,32,62,0)}}
@keyframes zh-up{0%{opacity:0;transform:translateX(-50%) translateY(14px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}

/* The login modal card already shows the Ziello logo + workspace name; just make the
   primary button Ziello red (structural selector — the only submit in the login form). */
html.ziello-login form button[type="submit"]{
  background:var(--ziello-red) !important;
  border-color:var(--ziello-red) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(238,32,62,.30);
}

@media (prefers-reduced-motion: reduce){
  #ziello-hero .zh-glow,#ziello-hero .zh-grid,#ziello-hero .zh-dot,#ziello-hero .zh-tag{animation:none !important}
}